jQuery UI datepicker's minDate option resets current value

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.

http://stackoverflow.com/questions/6399078/knockoutjs-databind-with-jquery-ui-datepicker — Shum, Jan 26 '17 at 11:13

score 0 · Answer 1 · edited Jan 27 '17 at 04:29

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>

jQuery UI datepicker's minDate option resets current value

1 Answers1