使用敲除将 datepicker 的 mindate 绑定到另一个 datepicker答案

【问题标题】：Use knockout to bind datepicker's mindate to another datepicker使用敲除将 datepicker 的 mindate 绑定到另一个 datepicker
【发布时间】：2017-02-07 20:19:07
【问题描述】：

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

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 添加到我的代码中，它就会被破坏。

【问题讨论】：

试试attr:{minDate:value}
@Rajesh，不，不幸的是它不起作用。
@mr.nothing，你能提供一个可行的例子吗？（不仅是 html/js 代码 - 一个完整的 jsfiddle/sn-p 可以工作并显示两个 datpicker 工作）。
@Dekel，我完全是前端新手，但我会尽力做到这一点。
stackoverflow.com/questions/28511049/…可能重复

标签： javascript jquery jquery-ui knockout.js datepicker

【解决方案1】：

您可以做的是在每次更改时使用 next 日期选择器的setStartDate 函数来获取（当前元素的）当前日期：

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

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

【讨论】：

谢谢，但不幸的是它不符合我的需要。我需要将任意日期选择器相互绑定。我的例子只是我所拥有的简化。事实上，我的表单有复杂的依赖关系，我必须处理。
你怎么知道哪两个日期选择器被“绑定”了？

【解决方案2】：

您正在向日期选择器提供 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/

【讨论】：