CODEWITHSUNDEEP
jquery-uiknockout.jsdatetimepicker
Saqib Shakil
Saqib Shakil

Reputation: 111

using JQueryUI DateTimePicker with Knockout

In Continuation of knockout js bind with datetimepicker gives an exception I am now able to use the datetimepicker with knockout but I am unable to use the time picker option of the same tool the code I have tried is embedded into the following jsfiddle but is throwing an error

<code>
http://jsfiddle.net/saqibshakil/scdET/
</code>

check console after edit

Upvotes: 0

Views: 2161

Answers (1)

RP Niemeyer
RP Niemeyer

Reputation: 114792

Looks like calling getDate on timepicker does not return an actual Date.

It appears that you can call it using datetimepicker successfully. So, your binding would look like:

ko.bindingHandlers.timepicker = {
    init: function (element, valueAccessor, allBindingsAccessor) {
        //initialize timepicker with some optional options
        var options = allBindingsAccessor().timepickerOptions || {};
        $(element).timepicker(options);

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

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

    },
    //update the control when the view model changes
    update: function (element, valueAccessor) {

        var value = ko.utils.unwrapObservable(valueAccessor()),
            current = $(element).datetimepicker("getDate");

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

Updated sample: http://jsfiddle.net/rniemeyer/L3BNw/

Upvotes: 3

Related Questions