Knockout Js with Jquery UI Datepicker - “Missing instance data for this datepicker”

Question

I have a date declared as an observable in my view model like this:

self.date = ko.observable(date);

In my markup, I am declaring the contr

Answer 1

I suspect the problem is that when the datepicker binding is applied, the id hasn't been set yet. And from what I could find online, the id is key to how the datepicker works, the datepicker is associated with the id. If it ever changes, it usually leads to problems.

Since you are using knockout 3.1, you can add the after property to your binding handler and include the attr binding to the list. This will ensure that the listed bindings are applied first before this one. And with the attr binding applied, the element should have an id by then.

ko.bindingHandlers.datepicker = {
    after: ['attr'], // add this
    init: ...,
    update: ...
};

Just beware that since your ids are being updated as you add/remove your payments. If a change alters the id of an existing control, it will detach the associated datepicker and you will see the problems again.

fiddle