Bootstrap datepicker wrong format with knockout

0
votes

I am using bootstrap datepicker plugin but it doesnt update in correct way my observable properties.In input I have correct values - 'mm/dd/yyyy',in knockout property - Arabic time + 03 GMT ..... .Here is someones custom binding with the same behavior.

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());
        widget.setValue();            
    }
}
};

var model = {
 test_date: ko.observable(new Date('2012/12/12'))
};

ko.applyBindings(model, $("#target")[0]);


 ////////////////////////////////////////////////////////

<input data-bind='datepicker: test_date'/>

<div data-bind="text: test_date"></div>

<input data-bind='datepicker: test_date'/>
1
twitter-bootstrapknockout.jsdatepicker
It would help if you'd explain what exactly isn't working, and what you've tried/researched to solve the issue. - Jeroen

1 Answers

0
votes

As an alternative, you can use the following js code to initialize the datepickers:

$('.input-date').datepicker().on("changeDate", function () {
        $(this).find("input").change();
});