Js bind knockout with datetimepicker gives an exception

Question

I think I can easily associate date data with jquery ui calendar and knockout.js thanks to this answer.

Now I need to bind the date and time data. Of course I can use timepicker . But I'm not sure how I can relate my data to knockout.js. I expected this to be similar to datepicker, so I made the following script

ko.bindingHandlers.datetimepicker = { init: function (element, valueAccessor, allBindingsAccessor) { //initialize datepicker with some optional options var options = allBindingsAccessor().datetimepickerOptions || {}; $(element).datetimepicker(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).datetimepicker("destroy"); }); }, update: function (element, valueAccessor) { var value = ko.utils.unwrapObservable(valueAccessor()), current = $(element).datetimepicker("getDate"); if (value - current !== 0) { $(element).datetimepicker("setDate", value); } } }; 

But when I ran the script, I got an error in the line //**** in javascript

 TypeError: observable is not a function 

But I can’t find what I did wrong.

Answer 1

I just found the following code works. Like little open source code, this add-on is not very stable and sometimes triggers a change event with zero observable. So I made a code to catch the exception and move on.

  ko.bindingHandlers.datetimepicker = { init: function (element, valueAccessor, allBindingsAccessor) { //initialize datepicker with some optional options var options = allBindingsAccessor().datetimepickerOptions || {}; $(element).datetimepicker(options); //handle the field changing ko.utils.registerEventHandler(element, "change", function () { var observable = valueAccessor(); try { observable($(element).datetimepicker("getDate"));//**** } catch(ex) {} }); //handle disposal (if KO removes by the template binding) ko.utils.domNodeDisposal.addDisposeCallback(element, function () { $(element).datetimepicker("destroy"); }); }, update: function (element, valueAccessor) { var value = ko.utils.unwrapObservable(valueAccessor()), current = $(element).datetimepicker("getDate"); if (value - current !== 0) { $(element).datetimepicker("setDate", value); } } }; 

Answer 2

This particular error is related to the line observable = valueAccessor (). You assign the observed value to valueAccessor by appending () to the end. To pass the value for the observable this way, you will need to write instead:

 var observable = valueAccessor; 

Otherwise, the observable is not an “observable function”.

Answer 3

Replace this line

 var observable = valueAccessor(); 

WITH

 var xxxx= valueAccessor(); 

Because you cannot use the observable, because it is a reserved keyword in a knockout.

Also, you might get an error somewhere in the future if you use the observable variable name.