Programmatically updating a Webshim date doesn't work in IE 8

Question

I'm using an HTML <input type="date"> with a Knockout binding. I'm using Webshim for browsers that don't support the date input type.

The native browsers are working perfectly; changing the date changes the model, and changing the model programmatically changes the date shown in the date input.

Changing the date on a browser that does not support the date type (e.g. IE8) works correctly and updates the Knockout model, but the reverse is not true. Changes to the model are not propagated to the Webshim-generated date picker, only to the hidden input that Webshim uses.

Is there a Webshim-provided method or event I can call or fire to tell it to look at the data and update the UI after a change? How could I write a Knockout binding to call this?

Answer 1

It turns out webshim requires that you use jQuery().val() to update the date, rather than using the DOM directly. I was able to write a knockout binding that did this by extending the normal value binding:

ko.bindingHandlers.date = $.extend({}, ko.bindingHandlers.value);

ko.bindingHandlers.date.update =  function(element, valueAccessor) {
    // Set value using jQuery val method as this is caught internally by webshim
    $(element).val(valueAccessor()());
};

Then I could use:

<input type="date" data-bind="'date': date">

as would be expected.