I have a page which has some input type="text" with a jQuery UI datepicker attached, which enters the date in the format "14 Feb 2012" into the field. Great. Now I need to adapt the interface for mobile/small screen. I am having the issue that when an iPhone user taps in the text input, the jQuery datepicker appears, and iOS also shows it's native text input keypad.
I tried using Modernizr to detect for html5 inputtype=date availability and disabling the jQuery datepicker if it's available and switching the input type to "date" so devices which understand this can use their native input. However, this enters the date on the format "2012-02-14" which the back end system does not understand. A lot of work has been done depending on the date arriving in the format "14 Feb 2012".
So if anyone can help, I'm looking for a way to get ONLY the jQuery UI datepicker to appear on all systems, or for a solution which means native date/text inputs can be forced to enter the format "14 Feb 2012".
Unfortunately, the datepicker format can't be overridden due to it being tied to the user's system settings.
What you could do though in fact is have your script do the dynamic switch from type="text" to type="date" based on available technology (e.g. Modernizr.inputtypes.date).
From there you could embed a hidden field and transition the name of the current date field to that hidden field and then parse the date format from the native datepicker into your desired format and set that value of the hidden field.
<input type="date" name="userSetDate"/>
to this:
<input type="date"/>
<input type="hidden" name="userSetDate" value="mm/dd/yyyy"/>
The difficulty would then be parsing the user defined format into your desired format because of the format variations:
10-06-13 --> is that October 6th 2013 or June 10th 2013 ?
Now you could do something that incorproates the top solution with something like styling a label to look like a button, apply an accurate [for] attribute and have the datepicker field be a type="hidden" and apply the datepicker to that.
<label for="fooDate">test</label>
<input type="hidden" name="fooDate" id="fooDate">
<script>
$('#fooDate').datepicker();
</script>
Hope you're (were, noticed the date this was posted) able to figure out!
Related
I am trying to understand the level of support of <input type="date"> in iOS. I tested it with an iPhone 4 with iOS 7.0.3, even if I specify a min attribute the date picker lets me choose a date before the constraint.
The HTML code is this:
<input type="date" id="checkIn" name="checkIn" class="form-control input-sm" value="2014-05-26" min="2014-05-26" data-date-format="YYYY-MM-DD" data-date-minDate="2014-05-26" placeholder="yyyy-mm-dd">
The data attributes are set for this datepicker but I detect the field support via Modernizr so I'm really sure it does not interfere in any case with the datepicker.
So the question is: did I do something wrong or is the date field lacking constraints support?
I have been having the same issue. It looks like although using <input type="date"> does render a date field. The min attribute is not working.
This website clearly states that there is support lacking.
From the website,
Partial support in iOS refers to a lack of support for attributes like step, min, or max. You have not done anything wrong.
Hope this answers your question.
I' have 2 text fields 1st one for giving date from and the other one for date to, what i want is while i'm selecting date from using 'calendar:datePicker' the dates before current date must be disabled and if i have selected a date 1/6/2014 in 1st text field, when i select the date to from the 2nd one the dates before 1/6/2014 must be disabled how can i achive this..?
From<calendar:datePicker name="datefrom" years="${2014..2017}" value="${new Date()}" defaultValue="${new Date()}"/>
To<calendar:datePicker name="dateto" years="${2014..2017}" value="${new Date()}" defaultValue="${new Date()}"/>
That looks like an old plugin and it might not have the option that you need.
Use jQuery UI instead: http://jqueryui.com/datepicker/#date-range
jQuery UI has a grails plugin as well. http://grails.org/plugin/jquery-ui
The situation
I want to use ui-date to set/edit a date in my app. I use the latest stable versions of angular, angular-ui, jquery-ui etc.
The problem
As soon as a date is selected using the datepicker the date in my model will equal the selected date minus 1 day. It will also get send to my server and saved in my database this way.
The plunker
http://plnkr.co/edit/Ft14Wa?p=preview
Initially the date in the datepicker input and the date in my model are the same. After picking a date they differ.
The question
What is going (wr)on(g) here???
ui-date expects your model to be an actual date object. In your case it's a string. If you take a look at the console you'll see that angularUI actually informs you about that. Then it advises you to add additional ui-date-format tag with the specified date format with which your date string will be parsed into date object.
Long story short, your need to adjust your input as this:
<input ui-date="{dateFormat: 'yy-mm-dd'}" ui-date-format="yy-mm-dd" ng-model="customer.contract_end_date"></input>
Working plunker.
this solves my problem.
angularjs uses default timezone which considers hour time. seting timezone option of ng-model to UTC clear hour times......
ng-model-options="{timezone:'UTC'}"
The problem is that angular is using its default timezone when parsing the date selected on the datepicker. To resolve the issue you can use the ng-model-options directive which accepts a "timezone" parameter.
<input type="text" ng-model-options="{timezone:'UTC'}" ... >
I set date format as dd-mm-yyyy as my requirement. then set date-type as string.
<input type="text" class="form-control col-xs-9"
data-date-format="dd-MM-yyyy" data-autoclose="1"
ng-model="modelName"
date-type="string" bs-datepicker required>
We're working on a .NET MVC mobile site. I understand that on the iPhone, mobile safari will display a datepicker for the following input field:
<input type="date"/>
We have a standard date picker helper which spits out date picker options for various platforms. In this case we detect mobile safari and then write out an input field that is bound to our model:
<input name="StartDate" value="2008/12/21" type="date"/>
The problem is that the value portion is not shown on load. We can enter in new values, and save them back to our database. But then when we reload the page those values don't show up in the fields. If we save again, our values are all set back to null in the db.
I noticed that when you select a date with the wheels on the iPhone, the value of the text field ends up in the format similar to "Apr 6, 2012" where as I'd expect it to show 2012/04/06 or 04/06/2012.
My guess is that the mobile safari displays a different attribute of the field, and then sets the value attribute appropriately behind the scenes.
Does anyone know what's going on with this? Thanks!
AFAIK the date must be RFC3339 compliant. Have you tried 2008-12-21 (dashed instead of slashes)?
<input type="date" value"yyyy-MM-dd" />
I'm using a jQueryUI datepicker for a simple "From" & "To" date range filter in my ASP.Net MVC web-app. Works fine until I hit a machine which had its datetime format (in the Regional Settings) set to "dd-MM-yy".
In my controller I've a postback action which accepts a custom search object as a parameter which is then passed to the search function. This custom object has the properties for "To" & "From" dates and as usual the binding takes place automatically. Works normal on a machine with date format "MM/dd/yy" but if I set it to "dd/MM/yy" in the regional settings then it is unable to parse the date.
The easiest solution could be to change the datepicker's format to
"dd-MMM-yyyy" a non-culture specific date format but my client wants
the selected date to be displayed in MM/dd/yyyy format.
Any clean and easy suggestion to handle this at the datepicker or controller level?
You can use an hidden field with a custom format:
HTML:
<input name="from" type="text" id="from" />
<input name="hiddenFrom" type="hidden" id="hiddenFrom" />
Javascript:
$("#from").datepicker({
altField: "#hiddenFrom",
altFormat: "dd-mm-yy" // or whatever
});
You'll find documentation about jquery ui date format here