DateTimePicker restricting from date
HTML
<script src="https://github.com/SteveSanderson/knockout/raw/master/build/output/knockout-latest.debug.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/base/jquery-ui.css">
<div class="ui-widget-content">Start Date:</div>
<div class="ui-widget-content">
<input id="from" data-bind="datepicker: StartDate, datepickerOptions: { numberOfMonths:2, defaultDate: -14 }" />
<span data-bind="text:StartDate"> </span>
</div>
<div class="ui-widget-content">End Date:</div>
<div class="ui-widget-content">
<input id="to" data-bind="datepicker: EndDate, datepickerOptions: { numberOfMonths:2 }" />
<span data-bind="text:EndDate"> </span>
</div>
JavaScript
ko.bindingHandlers.datepicker = {
init: function(element, valueAccessor, allBindingsAccessor) {
//initialize datepicker with some optional options
var options = allBindingsAccessor().datepickerOptions || {};
// Start of comment to make it work
options.onSelect = function(selectedDate) {
var option = this.id == "from" ? "minDate" : "maxDate",
instance = $(this).data("datepicker"),
date = $.datepicker.parseDate(
instance.settings.dateFormat || $.datepicker._defaults.dateFormat, selectedDate, instance.settings);
var dates = $("#from, #to");
dates.not(this).datepicker("option", option, date);
valueAccessor()(date);
};
// End of Comment to make it work
$(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()),
current = $(element).datepicker("getDate");
if (value - current !== 0) {
$(element).datepicker("setDate", value);
}
}
};
var viewModel = {
StartDate: ko.observable(),
EndDate: ko.observable(),
};
ko.applyBindings(viewModel);