bootstrap datepicker

http://stackoverflow.com/questions/11121960/bootstrap-datepicker-with-knockout-js-databind

by grahampcharles

HTML

<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/knockout/3.1.0/knockout-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker3.css">
<div id='target'>
    <input data-bind='datepicker: test_date'/>
    <div data-bind="text: test_date"></div>

</div>
    <button id='setDate' type="button">Set Date</button>

CSS

#target {
  margin: 2em;
}

JavaScript

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);
             }                
      });
        
      ko.utils.registerEventHandler(element, "change", function() {
             var value = valueAccessor();
             if (ko.isObservable(value)) {
                 value(new Date(element.value));
             }                
      });
    },
    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) {
                return;
            }                
            
            if( Object.prototype.toString.call(widget.date) == '[object String]' ) {
                widget.date = new Date(widget.date);
            }
            
            widget.setValue();
        }
    }
};

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

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

$("#setDate").on("click", function() {
    model.test_date(new Date('04/05/2012'));
});