knockout js bootstrap datepicker - asp.net-mvc

Question

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...
how do i bind the json date to knockout element... below is the code i have...
#Html.Bootstrap().ControlGroup().TextBoxFor(x => x.DateOfBirth).HtmlAttributes(new { data_bind = "kodate: DateOfBirth, datepickerOptions : new Date()", #class = "datepicker" })
$(function () {
$('.datepicker').datepicker({
autoclose: true
});
});
<input data-bind="kodate: startdate" class="datepicker"/>
the kodate is defined as below
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);
}
};
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...
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??
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...
i am using bootstrap-datepicker: https://github.com/eternicode/bootstrap-datepicker
any help is greatly appreciated...

Answer 1

The easiest way to do this is using a client-side library such as Moment.js to format your date properly while maintaining the two-way data-binding offered by Knockout. A simple way to get started is using a lightweight plug-in like shown here - http://makingsense.github.io/moment-datepicker/
You are not required to use that plug-in though, you just need to write your own custom binding handler to handle getting and setting the date. An example of this that I have used in the past -
Register a binding handler to format the date to bind to -
ko.bindingHandlers.datepicker = {
init: function (element, valueAccessor, allBindingsAccessor) {
//initialize datepicker with some optional options
var options = allBindingsAccessor().datepickerOptions || {};
$(element).datepicker(options);
//handle the field changing
ko.utils.registerEventHandler(element, "change", function () {
var observable = valueAccessor();
observable($(element).datepicker("getDate"));
});
//handle disposal (if KO removes by the template binding)
ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
$(element).datepicker("destroy");
});
},
update: function (element, valueAccessor) {
var value = ko.utils.unwrapObservable(valueAccessor());
if (String(value).indexOf('/Date(') == 0) {
value = new Date(parseInt(value.replace(/\/Date\((.*?)\)\//gi, "$1")));
}
var current = $(element).datepicker("getDate");
if (value - current !== 0) {
$(element).datepicker("setDate", value);
}
}
};
And then the mark-up -
<div class="span4">
<label>Start Date : </label><input data-bind="datepicker: startDate, datepickerOptions: { maxDate: new Date() }" />
</div>
Note: This answer was derived from an aggregation of other answers.