JS knockout: change event that doesn't fire for HTML5 date on iPad

Question

I use the Jock Knockout library to bind HTML5 input controls in my web application, which is designed to work on the iPad (iOS5, Safari 5.1). Binding is great for input types like text and selection, but not for date. After selecting a date value via datepicker, the value is not bound to the viewModel property (it is not actually saved).

This is what my HTML looks like.

<input id="dob" name="dob" type="date" data-bind="value: dob" /> 

I tried working with user binding, where I initialized the change event handler.

 ko.bindingHandlers.datePicker = { init: function (element, valueAccessor) { ko.utils.registerEventHandler(element, "change", function () { var observable = valueAccessor(); observable($(element).val()); }); }, update: function (element, valueAccessor) { var value = ko.utils.unwrapObservable(valueAccessor()); $(element).val(value); } }; 

Change HTML code to

 <input id="dob" name="dob" type="date" data-bind="datePicker: dob" /> 

Strange, even this event does not shoot. Note that in both scenarios, binding works fine in Windows XP in Opera and Safari browsers.

Ultimately, I got a solution to my problem using the "blur" event instead of the "change" in the user binding. Now the event handler is called, and I manually set the value from the date control.

Now my question is: is this something I'm doing wrong, and if not, why doesn't the HTML5 control change event fire, by default or through custom binding? I want date management to work as intended.

Answer 1

You are not doing anything wrong in terms of knockout. These events are really just not fired (without a knockout even in the picture) from what I can say by testing and exploring it a bit.

You can avoid user binding by doing:

<input type="date" data-bind="value: myDate, valueUpdate: 'blur'" />

Answer 2

I had a similar problem, but in my case even the blur event doesn't actually fire. So I used the input event with the valueUpdate property and solved the problem.