javascript - 使用 knockout 将日期选择器的提示绑定(bind)到另一个日期选择器

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

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
    });
  });

值被绑定，但minDate不会在日期选择上更新。可以，有人指出我的错误吗？

这是一个broken JsFiddle和working one。因此，一旦我将datepickerOptions添加到我的代码中，它就会被破坏。

最佳答案

您正在将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/