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.
Related
In HTML, you can use <input type='number' /> to restrict the user's input to numbers only. It also adds little increment/decrement numbers on the input field. Is there a way to do this in Native Base (v3.2.2)? What is the associated onChange property (onChange, onChangeText, onValueChange, etc.)?
I have scoured the official documentation and have found nothing.
I tried to find the issue and turned out that react-native-web ( one of NativeBase core dependencies) is not passing the props to the HTML Input.
I have created a PR for its fix.
I have an Input of type='time' from Angular Material and I want to use it with 24-hour format. I can't find how to do that.
<md-input-container class="input-material-element">
<input mdInput type="time" placeholder="{{labels.TIME_OF_DEPARTURE}}" [(ngModel)]="model.departureTime">
</md-input-container>
Angular Material does not format the <input type="time">.
That's the browsers implementation / presentation of the HTML5 <input> elements of type time. In some browsers you will get the desired 24-hour format and in some you get 12 hour with AM/PM.
You want to take a look at the documentation to make the appropriate business decision for your use case. Safari for example does not yet support time input natively, while on mobile platforms some browsers even tend to have nice user interfaces for the time input type.
mdn web docs HTML/Element/input/time
The mobiscroll documentation states
This preset enhances a regular HTML select to select the values with a scroller. The original select is hidden, and a dummy input is visible instead. The value of the select is maintained by the preset.
The sample HTML code they provide uses inline styling to hide the original select element
<select name="City" id="select" style="display:none">
However, when I do this and setup the mobiscroll replacement to appear inline
$('#select').scroller({preset:'select',theme:'default',display:'inline',mode:'scroller',inputClass: 'i-
txt'});
I find that although the scroller appears I still end up with what looks like an input element above it. This does not happen in their demo code but there I note that what they do is something like this
<div id="select_cont" style="display: none;">
<select name="City" id="select">
but that simply hides everything including the mobiscroll replacement. Looking under the covers I found that calling
$('#select').scroller({preset:'select',theme:'default',display:'inline',mode:'scroller',inputClass: 'i-
txt'});
introduces a dummy input element into the DOM.
<input id='cities_dummy'...
I can get the dummy to hide itself by issuing a
$('#cities_dummy').css('display','none')
immediately after creating the scroller. However, I cannot understand why things are working differently in the demo code. I have noted that they are using jQuery Mobile v 1.1.1 whilst I am using the very latest version.
Perhaps this issue is related to versions? Or is there something else at play here? I'd much appreciate any help.
I figured it out. It is all down to the
inputClass:i-txt
bit in the scroller options settings. In the demo code they are probably playing with this class via script depending on the value of the display property in the options object. The point is this - in order to get the original select to disappear when the scroller display is set to "inline" you must define i-txt (or whatever input class you use) as
.i-txt{display:none}
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!
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" />