Bootstrap datepicker with knockout.js databind
Bootstrap datepicker with knockout.js databind
This sample help to accomplish with the datepicker which is using:
ko.bindingHandlers.datepicker = { init: function(element, valueAccessor, allBindingsAccessor) { //initialize datepicker with some optional options var options = allBindingsAccessor().datepickerOptions || {}; $(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()); if (widget.date) { widget.setValue(); } } } };
It look like the functionality is normal , so remove that piece. This manage the widgets changeDate event to update the view model, During a user changes the date. The update function manage during the view model is changed to update the widget.
For bind the value to a non-observable, it require a little more code. Have a glance at this code:
This code also work:
ko.bindingHandlers.datepicker = { init: function (element, valueAccessor, allBindingsAccessor) { var unwrap = ko.utils.unwrapObservable; var dataSource = valueAccessor(); var binding = allBindingsAccessor(); //initialize datepicker with some optional options var options = allBindingsAccessor().datepickerOptions || {}; $(element).datepicker(options); $(element).datepicker('update', dataSource()); //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"); var value = ko.utils.unwrapObservable(valueAccessor()); //when the view model is updated, update the widget if (widget) { widget.date = value; if (widget.date) { widget.setValue(); $(element).datepicker('update', value) } } }};
Try this method to use the datepicker with k.o
ko.bindingHandlers.datepicker = { init: function (element, valueAccessor, allBindingsAccessor) { //initialize datepicker with some optional options var options = { autoclose: true, format: 'yyyy-mm-dd', } //var options = allBindingsAccessor().datepickerOptions || {}; $(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)) { var myDate = event.date; var month = myDate.getMonth() + 1; var monthText = month; if (month < 10) monthText = "0" + month; var day1 = parseInt(myDate.getDate()); var dayText = day1; if (day1 < 10) dayText = '0' + day1; value(myDate.getFullYear() + '-' + monthText + '-' + dayText); } }); }, 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(widget.date); } }};