jQuery UI datepicker's minDate option resets current value - jquery-ui

Question

I have jQuery UI datepicker integrated with KnockoutJS.
<input class="input-small hasDatepicker" data-bind="datepicker: ItemCurrentDate, datepickerOptions: { dateFormat: 'dd/mm/yy', changeMonth: true, changeYear: true, minDate: ItemStartDate(), maxDate: ItemEndDate(), datePickerPlaceholder: 'dd/mm/yy' } name="ItemCurrentDate" type="text" value="" placeholder="dd/mm/yy" id="dp12345">
I had to add minDate and maxDate restrictions.
After I added minDate restriction, it set current value(ItemCurrentDate) to maxDate value, even if ItemCurrentDate >= ItemStartDate.
I need ItemStartDate to remain the same when I just open dp.

Answer 1

not totally following the question, but will this work? here is a fiddle. http://jsfiddle.net/LkqTU/33447/ I wasn't sure from your question if min and max dates are observables that can change. I assumed they were static but if not you may need to change the update portion of the custom binding, probably destroy the datepicker and recreate it with the new min and max dates.
you may run the solution below or you may use the fiddle referenced above
ko.bindingHandlers.datepicker = {
init: function(element, valueAccessor, allBindingsAccessor) {
var options = allBindingsAccessor().datePickeroptions || {};
options.onSelect = function(selected, evnt) {
var observable = valueAccessor();
observable(selected);
};
$(element).datepicker(options);
// setting initial value
$(element).datepicker("setDate", valueAccessor()());
//handle disposal (if KO removes by the template binding)
ko.utils.domNodeDisposal.addDisposeCallback(element, function() {
$(element).datepicker("destroy");
});
},
//update the control when the view model changes
update: function(element, valueAccessor, allBindingsAccessor) {
var value = ko.utils.unwrapObservable(valueAccessor());
$(element).datepicker("setDate", valueAccessor()());
}
};
function model() {
var self = this;
this.itemCurrentDate = ko.observable(new Date(2017, 1, 26));
this.itemStartDate = ko.observable(new Date(2017, 1, 1));
this.itemEndDate = ko.observable(new Date(2017, 2, 22));
this.resetDate = function() {
self.itemCurrentDate(new Date(2017, 1, 26));
}
}
var mymodel = new model();
$(document).ready(function() {
ko.applyBindings(mymodel);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<input data-bind="datepicker: itemCurrentDate,
datePickeroptions: {
dateFormat: 'dd/mm/yy',
changeMonth: true,
changeYear: true,
minDate: itemStartDate(),
maxDate: itemEndDate(),
datePickerPlaceholder: 'dd/mm/yy'
}
" />
<p>
theDate: <span data-bind="text: itemCurrentDate"></span>
</p>
<p>
<input type="button" data-bind="click: resetDate" value="reset date" </p>
</p>