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:

http://jsfiddle.net/rniemeyer/KLpq7/

   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);
    }
}};