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" />
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.
The best iOS keyboard for entering USD currency values (pictured below) includes numbers 0-9, the decimal symbol, the comma symbol, and the dollar sign. As far as I know, the only way to get this keyboard on Mobile Safari is to use <input type="number">.
Unfortunately, iOS currently has built-in validation for the number input type which screens out commas and dollar symbols. Since this validation "feature" is embedded in the browser and Mobile Safari hasn't yet implemented the novalidate directive, there is currently no way to do this validation manually.
Using <input type="text"> would obviously solve the validation problem, but it also would bring up the regular alpha keyboard, which is not acceptable for my current project (a financial calculator).
I'm on the verge of doing something crazy, like using JavaScript to quickly switch the type from number to text after the input receives focus. I'm grasping at straws here. Any ideas?
For now, JavaScript is the only solution. Here's the simplest way to do it (using jQuery):
HTML
<input type="text">
JavaScript
$('input[type="text"]').on('touchstart', function() {
$(this).attr('type', 'number');
});
$('input[type="text"]').on('keydown blur', function() {
$(this).attr('type', 'text');
});
The idea is simple. The input starts off and ends up with type="text", but it briefly becomes type="number" on the touchstart event. This causes the correct iOS keyboard to appear. As soon as the user begins to enter any input or leave the field, the input becomes type="text" once again, thus circumventing the validation.
There's one downside to this method. When the user returns to an input that has already been filled out, the input will be lost (if it doesn't validate). This means the user won't be able to go back and edit previous fields. In my case, this isn't all that bad because the user may want to use the calculator over and over again with different values, so automatically deleting the input will save them a few steps. However, this may not be ideal in all cases.
You can use the attribute pattern for your input field as text. This instructs mobile safari to bring up the numeric keyboard. Try something along the lines of:
<input type="text" pattern="\d*" />
Just change your pattern regex to what you want.
Here is more information on the pattern attribute
UPDATE
After reading Apple's Documentation on managing Text in Webviews it seems like you are out of luck. You will have to do some javascript magic to do what you want.
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!
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
How do you set a string to denote the required format pattern in a text box. For instance, if I have a text box displayed such as a date field, how do I display a format of "dd/mm/yyyy" to help the User complete the field. If the field is already populated when the view is displayed then the actual data should be displayed.
If the field is a drop down list, I would like to display "Please select from the list" if the field does not contain a value.
In HTML 5 you can achieve it using Placeholder attribute of input tag like this:
<input name="email" type="email" placeholder="validemail#email.com" />
However HTML5 is not yet supported by most browsers, so you will have to live with javascript based solution. Populate the desired value in textbox when page is loading (you can use CSS to make that text dim). Using javascript empty the field on "onfocus" event.
For drop down list populate "please select..." thing with Value as 0. This way you can validate on server that user has not selected any valid value.