CODEWITHSUNDEEP
javascriptjqueryjquery-uiknockout.jsdatepicker
Tommy
Tommy

Reputation: 35

Datepicker change event throwing "TypeError: string is not a function"

I'm trying to use KnockoutJS with jQuery UI. I have an input element with a datepicker attached. I am using Knockout-3-2-0.js. Each time I update the datepicker, the variable that it is bound to just throws the below exceptiuon.

Uncaught TypeError: string is not a function

I've checked the variable and the data being passed is string value.

ko.bindingHandlers.datepicker = {
    init: function(element, valueAccessor, allBindingsAccessor) {
        var $el = $(element);

        //initialize datepicker with some optional options
        var options = allBindingsAccessor().datepickerOptions || {};
        $el.datepicker(options);

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

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

    },
    update: function(element, valueAccessor) {
        var value = ko.utils.unwrapObservable(valueAccessor()),
            $el = $(element),
            current = $el.datepicker("getDate");

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

Upvotes: 0

Views: 577

Answers (1)

Nick Ball
Nick Ball

Reputation: 1846

My guess is that you are providing a string as the value accessor to the binding in your html, so something like this:

<input data-bind="datepicker: '2015-05-10'" />

Where the error is being thrown, you're assigning the value accessor to the observable variable and then trying to call that as a function. I believe what you want to do with your view model is provide an observable as the value accessor to your binding, like this:

<input data-bind="datepicker: myObservableDate" />

I put together a quick fiddle: http://jsfiddle.net/npbee/s4mmfada/

Upvotes: 1

Related Questions