使用挖空将日期选取器的最小日期绑定到另一个日期选取器

Question

我有很多对日期选择器。第一个日期选择器是间隔的开始，第二个是间隔的结束。从逻辑上讲，要求第一个日期选择器的值不能超过第二个，反之亦然。我写了下面的代码:

HTML:

<input type="text" class="datepicker" data-bind="datepicker: firstDate, datepickerOptions: { endDate: secondDate }" />
<input type="text" class="datepicker" data-bind="datepicker: secondDate, datepickerOptions: { startDate: firstDate }" />  

和JS:

  function model() {
        var self = this;
        self.firstDate = ko.observable();
        self.secondDate = ko.observable();
  }
  ko.bindingHandlers.datepicker = {
    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);
        }
      });
    },
    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) {
          widget.setValue();
        }
      }
    }
  };
  ko.applyBindings(new model());
  $('body').on('focus', ".datepicker", function() {
    $(this).datepicker({
      format: 'dd.mm.yyyy',
      language: 'ru',
      forceParse: true,
      todayBtn: true,
      clearBtn: true,
      autoclose: true
    });
  });

值被get绑定，但是minDate在日期选择时不更新。有人能指出我的错误吗?

这是一个坏的JsFiddle和一个工作的。所以只要我把datepickerOptions添加到代码中它就坏了

Answer 1

您正在为您的日期选择器提供ko.observable选项。日期选择器不会自动知道如何处理这些。

你必须在update方法中处理可观察的选项。例如:

  var options = allBindingsAccessor().datepickerOptions || {};
  // Unwrap observable dates
  Object.keys(options).forEach(function(key) {
    options[key] = ko.unwrap(options[key]);
  });
  var widget = $(element).data("datepicker");
  if (options.startDate) widget.setStartDate(options.startDate);
  if (options.endDate) widget.setEndDate(options.endDate);

这是一个更新的小提琴:https://jsfiddle.net/4ebexf44/

Answer 2

您可以做的是在每次更改时使用下一个日期选择器的setStartDate函数来查找当前(当前元素的)日期:

update: function(element, valueAccessor) {
    $(element)
        .next('input.datepicker')
        .datepicker('setStartDate', $(element).datepicker('getDate'));
}

这是一个工作的jsfiddle(主要基于您的工作):
https://jsfiddle.net/ynfoj5jz/