Angular UI-Bootstrap how to get date from DatePicker? - datepicker

Given the pop-up example at http://plnkr.co/edit/idrirF9zxvCMCQWTk8nr?p=preview how do I actually get the date if the user changes it?
I am guessing that I should do it in $scope.open = function($event) but I just don't know how. I have searched this site & googled extensively. What did I miss? Thanks.

you plunk link is not working.
I don't know what exactly happen in your code.
I think maybe your miss ng-model,
ng-model is the way to do two-way data binding in angular .
for example
<input type="text" datepicker-popup="dd-MMMM-yyyy" ng-model="dt" />
in this example date is binding to dt (ng-model="dt")
you can get data by $scope.dt
if you want to watch the date change
you can do
$scope.$watch('dt',function(val){
//to do
console.log(val)
})

Related

Firefox input type=date min not opening on minimum valid month

I'm not sure if there's a way around this, but Firefox doesn't play nicely when you're using input type="date" with a min= attribute: It always open the datepicker on the current month, rather than the month where the minimum valid date begins. This is particularly annoying if the date is in the future.
For example:
<input type="date" min="2021-08-04">
(See JSFiddle in Firefox.)
The user has to manually scroll through months until they finally get to the one that's available. Less than ideal!
One way to bypass this behaviour is to set a value to the input as suggested in the comments. Instead of setting value attribute in the HTML, you can try to set it programmatically when the user clicks on the input and the datepicker is shown.
I think that focus/focusin are the best events to use to catch, since as far as I know there is no show/open events on input[type="date"].
On MDN page, in the Events sections are mentioned only change and input.
Here a live sample:
var dateControl = document.querySelector('input[type="date"]');
dateControl.addEventListener("focus", function(){
// You can add validation on value
if( this.min && !this.value ){
this.value = this.min;
}
});
<input type="date" min="2021-08-08">
I know this is not a really great solution as the browser can be tricked any time.
But this should work too.
HTML : <input id="dateInput" type="date" min="2021-08-08">
You can identify the browser of the client if it is Firefox and change the date automatically to become the minimum through this JS:
if (navigator.userAgent.indexOf("Firefox") != -1) {
document.getElementById("dateInput").value = document.getElementById("dateInput").min;
}
You can use value attribute to set the default value.
<input type="date" min="2021-08-04" value="2021-08-04">

JQuery Mobile/Datebox, difference between display date format and submit date format

Is there a way to display a date in an input different from the format I want to submit.
For example I have to submit a date in "yyyy-mm-dd" format but I want to display the date in another format : "dd/mm/yyyy" (french display).
Is there a good tip to do that with Datebox for jQuery Mobile (an option I didn't see ?)
I think I have to cheat in creating an input hidden with the good form format and another one with the format to display (and not submitted), but maybe a better solution exists.
Any ideas ?
Your best bet is to indeed use 2 inputs - but, it's pretty easy to do, and using a callback on the set event, you can even make datebox do the second format for you.
http://dev.jtsage.com/jQM-DateBox2/demos/script/split.html
(Note: I just added the demo, so you didn't miss it earlier)
Just a small addition
It should be "overrideDateFormat":"%d/%m/%Y" in the HTML inline options.
In http://dev.jtsage.com/jQM-DateBox2/demos/script/split.html it states "dateFormatOverride":"%d/%m/%Y"} however this is incorrect and doesn't work. Just a heads up for anyone else with this issue.
Yes you need to use this method.
<!-- fix american date formatting -->
<script type="text/javascript">
jQuery.extend(jQuery.mobile.datebox.prototype.options, {
'overrideDateFormat': '%d/%m/%Y',
'overrideHeaderFormat': '%d/%m/%Y'
});
</script>

iPad datetime input value format

I'm developing a webapp for iPad and i got stuck on something that should be pretty basic.
I have a form with a datetime input which can be edited but it's supposed to show a default value. I tried using the followin tag
<input type="datetime" id="xyz" name="xyz" value="1996-12-19T16:39:57" />
no default value shown, picker works fine, and if edited everything is fine, just not showing the default value I'm setting.
If I use this instead (which of course I can't use...) everything works perfectly and the default value is regularly shown
<input type="date" id="xyz" name="xyz" value="1996-12-19" />
I tried changing the date format in many ways, as suggested by various articles I found on the web, no luck...
After a day search I found the solution while looking for something else (!!!)
Future reference for whoever gets stuck on this like me, the correct format on iOS for DATETIME input type is
yyyy-MM-ddTHH:mm:ss.fffZ
and remember that it the date is GMT+0 (mine was off 2 hours)
hope it helps

Commonspot forms hidden field values

I have a form in commonspot, which uses hidden field to pass the information to next form,which it got from a previous form, but I'm not sure about the syntax for the default value of hidden fields. I have tried using form.fieldname, evaluate(form.fieldname), and #form.filedname#.
Can anyone help me with this ?
Thanks,
AA
Ardash - you should paste some actual code to help us understand what you mean.
In general if you want a "default" value (for the case where the item doesn't exist previously) you should use cfparam like so:
<cfparam name="form.myField" default="*some default value*"/>
Then in your hidden field you can safely do this:
<input type="hidden" name="myField" value="<cfoutput>#form.myField#</cfoutput>"/>
Hope this helps. Paste some code for a better response :)
You can list the field names submitted to the page using this method:
<cfoutput>#form.fieldnames#</cfoutput>
alternatively, you can get the field names and data:
<cfdump var="#form#">
This might help you figure out what is going on.

Grails - how to hide a date inside a form

I have an 'edit' view for a model that has several fields (one of which is a date). I only want a few of the fields visible to allow edits, so I just hide the other fields using <g:hiddenField>
But one of the fields is of type TimeStamp and I can't seem to find a way to hide this in the form. I tried
<g:form method="post" >
<g:textField name="firstName" value="${applicationUserInstance?.firstName}" />
<g:textField name="lastName" value="${applicationUserInstance?.lastName}" />
<g:datePicker name="createDate" style="visibility:hidden;" precision="day" value="${applicationUserInstance.createDate}" />
The date picker is still visible. Any idea how to hide the date so that I can just pass this to the update method upon submit of the form. Many thanks.
Just re-iterating Rob's comment here. No need to put that on the form. The only data you need on the form is the data you are updating and the ID of what is being updated. Everything else will just stay the same...
def update = {
def applicationUserInstance = User.get(param.id)
// at this point applicationUserInstance.createDate is
// correct.
applicationUserInstance.properties = params
// since no createDate was in the params, it doesn't change.
// so you're good
applicationUserInstance.save(flush:true)
}
Actually my answer below might not be the right answer to your question. Otherwise if you really just have a createdDate-field, which should keep track, when the entry was created in the database, I suggest you do it the Grails-way and use the reserved keywords 'dateCreated' and 'lastUpdated'
Check http://grails.org/doc/1.3.7/guide/5.%20Object%20Relational%20Mapping%20(GORM).html#5.5.1 Events and Auto Timestamping
on how to use these. If you use these then my answer below will be helpful to control the visibility of these fields 'dateCreated', 'lastUpdated'
Suggestions for 'dateCreated', 'lastUpdated'
Probably you want this timestamp to be created automatically as you found it in the Grails documentation but you do not want it to be visible in your view.
Now, to exclude this timestamp from being visible, first
grails install-templates
I assume you have grails-1.3.7
Go to src/templates/scaffolding and check your gsp-files, e.g. 'create' and 'edit'
Search for this line:
<% excludedProps = ["version", "id",
and edit for example 'dateCreated'
<% excludedProps = ["dateCreated", "version", "id",
There is also a tutorial on this topic http://www.ibm.com/developerworks/java/library/j-grails01209/index.html
Greetings,
Jan