I am trying to create an HTML5 input date component so that I can take advantage of the native iOS date/time picker and I am using jquery. I have the following code to generate the component:
var $inputDate = $("<input></input>");
$inputDate.attr("type", "date");
$inputDate.attr("value", "2004-05-03");
$inputDate.change(function(event)
{
console.log("value changed");
});
The code is running inside a webkit component in a native app. The input control appears fine and I can change the value using the picker. However, the change function is not triggered when I change the value and dismiss the picker. When I run this in a web page in Chrome, things work as expected. How do I make this work on iOS?
<input type="date"> <input> elements of type="date" create input fields that let the user enter a date, either with a textbox that validates the input or a special date picker interface.
The min attribute specifies the minimum value (date) for a date field. Tip: Use the min attribute together with the max attribute to create a range of legal values. Tip: To set or return the value of the max attribute, use the max property.
The onblur function is invoked when the date/time picker is dismissed. So this does work:
var $inputDate = $("<input></input>");
$inputDate.attr("type", "date");
$inputDate.attr("value", "2004-05-03");
$inputDate.blur(function(event)
{
console.log("value changed");
});
In newer versions of Chrome (and Chrome on Android):
Here is an example showing which event is generated using plain JavaScript: http://jsbin.com/iximuy/4
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With