title: knockout js bootstrap datepicker
body: <p>i know this question is asked lot of times before... but i have tried all the solutions and none of them are working.... hence asking again...</p>
  
  <p>how do i bind the json date to knockout element... below is the code i have...</p>
  
  <p>@Html.Bootstrap().ControlGroup().TextBoxFor(x => x.DateOfBirth).HtmlAttributes(new { data_bind = "kodate: DateOfBirth, datepickerOptions : new Date()", @class = "datepicker" })</p>
  
  <pre><code>    $(function () {
          $('.datepicker').datepicker({
              autoclose: true
          });
      });
  
      &lt;input data-bind="kodate: startdate" class="datepicker"/&gt;
  </code></pre>
  
  <p>the kodate is defined as below</p>
  
  <pre><code>ko.bindingHandlers.kodate = {
  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 (_.isString(widget.date)) {
              widget.date = new Date(parseInt(widget.date.replace(/\/Date\((.*?)\)\//gi, "$1")));
              //widget.date = new Date(widget.date);
          }
  
          widget.setValue();
      }
  },
  
  update_old: function (element, valueAccessor) {
      var value = ko.utils.unwrapObservable(valueAccessor());
  
      //handle date data coming via json from Microsoft
      if (String(value).indexOf('/Date(') == 0) {
          value = new Date(parseInt(value.replace(/\/Date\((.*?)\)\//gi, "$1")));
      }
  
      $(element).datepicker("setValue", value);
  }
  };
  </code></pre>
  
  <p>now the date is being displayed correctly... but when i post the date... it is posted in json format and the model binder is not able to convert the json date (/Date(1339230900000)/) to the actual date and hence the date remains null on server side...</p>
  
  <p>how do make sure that the model binder converts the json date /Date(1339230900000)/ to the server side DateTime or how to post the date in different format so that model binder is able to recognize the date??</p>
  
  <p>interesting thing is if i change the date, then its posted in ISO format, but if i don't change the date then its posted in json format... so may be something wrong with the init code...</p>
  
  <p>i am using bootstrap-datepicker: <a href="https://github.com/eternicode/bootstrap-datepicker" rel="nofollow">https://github.com/eternicode/bootstrap-datepicker</a></p>
  
  <p>any help is greatly appreciated... </p>