Updating bootstrap datepicker after initialization using KnockoutJS

Question

I'm using Bootstrap datepicker with the following custom KnockoutJS binding, which worked fine for me until now:

ko.bindingHandlers.datepicker = { init: function(element, valueAccessor, allBindingsAccessor) { //initialize datepicker with some optional options var options = allBindingsAccessor().datepicker || {}; $(element).datepicker(options); //when a user changes the date, update the view model ko.utils.registerEventHandler(element, "changeDate", function(event) { var value = valueAccessor(); if (ko.isObservable(value)) { value(event.date); } }); }, update: function(element, valueAccessor) { var widget = $(element).data("datepicker"); //when the view model is updated, update the widget if (widget) { widget.date = ko.utils.unwrapObservable(valueAccessor()); widget.setValue(); } }

};

Now, I have a situation where I get the startDate and endDate values after the datepicker initialization takes place. I've set up an example here:

http://jsfiddle.net/6WR5r/

The datepicker is initialized with the correct dates, but when I hit the "Change Date" button, the datepicker is not updated, even though the update function on the custom binding is fired.

I've tried different versions of the update function, with no success:

update: function(element, valueAccessor, allBindingsAccessor) { var options = allBindingsAccessor().datepicker || {}; $(element).datepicker(options); } update: function(element, valueAccessor, allBindingsAccessor) { $(element).datepicker('update'); }

The only thing that worked was using the setStartDate and setEndDate methods, like this:

update: function(element, valueAccessor, allBindingsAccessor) { var options = allBindingsAccessor().datepicker || {}; $(element).datepicker('setStartDate', options.startDate); $(element).datepicker('setEndDate', options.endDate); }

But I'm looking for a better approach. Is there a way to use the update function to update the datepicker with the new values, without having to specify which options to update?

You don't seem very interested in following the answers you get... — GôTô
– GôTô, Commented Jun 19, 2014 at 14:39
The answers I've been getting lately were not helpful enough to mark them as accepted. — Norbert
– Norbert, Commented Jun 19, 2014 at 14:44
Maybe you can comment on them to explain how they are not useful to you. It feels like you ask and leave; it does not make people want to help — GôTô
– GôTô, Commented Jun 19, 2014 at 14:46

Community · Accepted Answer · 2017-05-23 12:22:36Z

So in two questions you make me write two ugly solutions...

Apparently you need to remove the plugin and re-create it when you want to change startDate or endDate :(

Your update function becomes:

update: function(element, valueAccessor, allBindingsAccessor) { console.log("update fired"); //when the view model is updated, update the widget if ($(element).data("datepicker")) { $(element).datepicker("remove"); var options = allBindingsAccessor().datepicker || {}; $(element).datepicker(options); $(element).data("datepicker").date = ko.utils.unwrapObservable(valueAccessor()); $(element).data("datepicker").setValue(); } }

Demo

I'd rather have an ugly solution than no solution :) This is great. Thanks for the quick response! One more question. If the update function always fires after init, is there a point to keep datepicker initialization code (var options = ... $(element).datepicker(options); ) in both functions?
Indeed you could handle the datepicker creation in the update function here. The doc says (like you) the update function is called on init too.

Collectives™ on Stack Overflow

Updating bootstrap datepicker after initialization using KnockoutJS

1 Answer 1

Demo

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Linked

Related