Geek Answers Handbook

Js Knockout with JQuery UI Datepicker - "Missing Instance Data for this Date"

I have a date declared as observable in my model, for example:

self.date = ko.observable(date);

In my markup, I declare the control as follows:

<div class="input-group">
    <input class="form-control datepicker" 
        data-bind="
            datepicker: date, 
            attr: { 
                id: 'Payments_' + $index() + '_Date', 
                name: 'Payments[' + $index() + '].Date'
            }
        "
        data-dateformat="dd/mm/yy" 
        data-val="true" 
        data-val-date="The field Date must be a date." 
        data-val-required="The Date field is required."
    />
    <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
</div>

This is used in the Jock Knockout template, and I try to make it convenient by binding the ASP.Net MVC model to the collection of the user object.

I use the following Jock Knockout custom binding:

ko.bindingHandlers.datepicker = {
    init: function (element, valueAccessor, allBindingsAccessor) {
        //initialize datepicker with some optional options
        var options = allBindingsAccessor().datepickerOptions || { dateFormat: 'dd/mm/yy' };
        $(element).datepicker(options);

        //handle the field changing
        ko.utils.registerEventHandler(element, "change", function () {
            var observable = valueAccessor();
            observable($(element).datepicker("getDate"));
        });

        //handle disposal (if KO removes by the template binding)
        ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
            $(element).datepicker("destroy");
        });

    },
    //update the control when the view model changes
    update: function (element, valueAccessor) {
        var value = ko.utils.unwrapObservable(valueAccessor()),
            current = $(element).datepicker("getDate");

        if (value - current !== 0) {
            $(element).datepicker("setDate", value);
        }
    }
};

My problem is that when a value is selected in Datepicker, I get the following error in Chrome:

Uncaught Missing instance data for this datepicker 
t.extend._getInst 
t.extend._selectDay
t.extend._attachHandlers.e.dpDiv.find.map.e.selectDay 
x.event.dispatch jquery.js:4692x.event.add.y.handle

If I remove the attribute binding to set the identifier and the name of the control, an error does not occur. I need to be able to set this so that the MVC model binding can interpret it correctly. Any suggestions or ideas would be very welcome.

thank

+2
1

, , datepicker, . , , , datepicker, datepicker . - , .

3.1, after attr . , . attr, id.

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

, , / . , datepicker, .

fiddle

+7

More articles:


All Articles