How to register for value change events on <input type=date> on iOS
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):
- the onchange event is invoked when the date is chosen
- the onblur event is not invoked when the dropdown is dismissed, only once the control loses keyboard focus
Here is an example showing which event is generated using plain JavaScript: http://jsbin.com/iximuy/4
Related videos on Youtube
Mirza Dobric
Updated on March 21, 2020Comments
-
Mirza Dobric about 4 years
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?
-
A-Live about 12 yearsFound other users complaining the change event wasn't triggered, they were suggested to use something like the following kit instead: cubiq.org/spinning-wheel-on-webkit-for-iphone-ipod-touch
-
Mirza Dobric about 12 yearsThanks for the suggestion, but using that kit doesn't give locale support which our product requires.
-
-
kand over 11 yearsMan I was tearing my hair out over this one, thanks for saving me!