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

值被绑定但是日期选择时不会更新minDate。拜托，有人能指出我的错误吗？

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

Answer 1

您正在为{date}选项卡提供ko.observable个选项。 datepicker不会自动知道如何处理这些。

您必须在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

您可以做的是在每次更改时使用 next datepicker的setStartDate功能（当前元素的当前日期）：

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

这是一个工作的jsfiddle（主要基于你的工作）：
https://jsfiddle.net/ynfoj5jz/

使用knockout将datepicker的注意力绑定到另一个datepicker

2 个答案: