自定义 Flatpickr 淘汰赛绑定

Question

我正在尝试为Flatpickr 创建一个淘汰赛绑定，但没有运气。我尝试从接受的答案here 调整代码无济于事。 Flatpickr 已初始化，但它似乎没有使用我设置的默认选项，并且绑定的更新部分根本不起作用。

我的代码如下。我会创建一个 jsFiddle，但它在工作中被阻止了..

ko.bindingHandlers.datetimepicker = {
  init: function (element, valueAccessor, allBindingsAccessor) {
    var options = allBindingsAccessor().datetimepickerOptions || { dateFormat: 'm-d-Y', enableTime: true };
    var $el = $(element);

    $(element).flatpickr(options);

    //handle the field changing by registering datepicker's changeDate event
    ko.utils.registerEventHandler(element, "onChange", function () {
      var observable = valueAccessor();
      observable($el.val());
    });

    //handle disposal (if KO removes by the template binding)
    ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
      $el.flatpickr("destroy");
    });

    $el.val(new Date(ko.utils.unwrapObservable(valueAccessor())));
  },
  update: function (element, valueAccessor, allBindingsAccessor) {
    var value = ko.utils.unwrapObservable(valueAccessor());
    var $el = $(element);

    // handle json date from microsoft
    if (String(value).indexOf('/Date(') == 0) {
      value = new Date(parseInt(value.replace(/\/Date\((.*?)\)\//gi, "$1")));
    }

    var current = new Date($el.val());

    if (value - current !== 0) {
      $el.flatpickr('setDate', value);
    }
  }
};

编辑

关于我的情况的更多信息。我在顶部有一个带有寻呼机按钮的页面，这些按钮在我的视图模型中的一个数组中循环。每次我翻页时，displayRecord 属性都会设置为数组中的下一个/上一个项目，并且所有编辑字段都绑定到 displayRecord 属性。这适用于我的所有输入，除了使用 @atitsbest 提供给我的 datetimepicker 绑定的输入。

第一次填充 datetimepicker 字段，但是一旦我翻过它们，该记录的 viewmodel 属性就会以某种方式设置为 null。

编辑 2

终于搞定了。这是最终产品。最终删除了 init 函数中的订阅，因为它在尝试将其设置为可观察到 null 时导致错误。还为用户添加了 flatpickr 包装功能，以提供他们自己的按钮用于清除、切换等。

ko.bindingHandlers.flatpickr = {
  init: function (element, valueAccessor, allBindingsAccessor) {
    var options = $.extend({
      dateFormat: 'm/d/Y H:i',
      enableTime: true,
      time_24hr: true,
      minuteIncrement: 1
    }, allBindingsAccessor().flatpickrOptions);
    var $el = $(element);
    var picker;

    if (options.wrap) {
      picker = new Flatpickr(element.parentNode, options);
    } else {
      picker = new Flatpickr(element, options);
    }

    // Save instance for update method.
    $el.data('datetimepickr_inst', picker);

    // handle the field changing by registering datepicker's changeDate event
    ko.utils.registerEventHandler(element, "change", function () {
      valueAccessor()(picker.parseDate($el.val()));
    });

    // handle disposal (if KO removes by the template binding)
    ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
      $el.flatpickr("destroy");
    });
  },
  update: function (element, valueAccessor, allBindingsAccessor) {
    // Get datepickr instance.
    var picker = $(element).data('datetimepickr_inst');

    picker.setDate(ko.unwrap(valueAccessor()));
  }
};

Answer 1

我创建了一个 jsfiddle 并对您的绑定进行了一些更改：

• 将事件名称从“onChange”更改为“change”；现在它会触发。
• 创建了一些默认选项，即使设置了自定义选项；对于默认的 dateFormat 很有用。
• 将“更新”功能替换为订阅以更新 可观察到的；。
• 绑定值现在始终是日期。

新绑定：

ko.bindingHandlers.datetimepicker = {
  init: function(element, valueAccessor, allBindingsAccessor) {
    var options = $.extend({
        dateFormat: 'm-d-Y H:i',
        enableTime: true
      }, allBindingsAccessor().datetimepickerOptions),
      $el = $(element),
      picker = new Flatpickr(element, options),
      observable = valueAccessor();

    //handle the field changing by registering datepicker's changeDate event
    ko.utils.registerEventHandler(element, "change", function() {
      observable(picker.parseDate($el.val()));
    });

    //handle disposal (if KO removes by the template binding)
    ko.utils.domNodeDisposal.addDisposeCallback(element, function() {
      $el.flatpickr("destroy");
    });

    observable.subscribe(function(newVal) {
      $el.val(picker.formatDate(options.dateFormat, newVal));
    });

    picker.setDate(ko.unwrap(observable));
  }
};

希望对您有所帮助。

更新

为了应对分页，我更改了绑定。这是更新的jsfiddle，用于测试与分页场景的绑定。 这里是新的绑定代码：

ko.bindingHandlers.datetimepicker = {
  init: function(element, valueAccessor, allBindingsAccessor) {
    var options = $.extend({
          dateFormat: 'm-d-Y H:i',
          enableTime: true
        },
        allBindingsAccessor().datetimepickerOptions),
      $el = $(element),
      picker = new Flatpickr(element, options);

    // Save instance for update method.
    $el.data('datetimepickr_inst', picker);

    // handle the field changing by registering datepicker's changeDate event
    ko.utils.registerEventHandler(element, "change", function() {
      valueAccessor()(picker.parseDate($el.val()));
    });

    // handle disposal (if KO removes by the template binding)
    ko.utils.domNodeDisposal.addDisposeCallback(element, function() {
      $el.flatpickr("destroy");
    });

    // Update datepicker with new value from observable
    valueAccessor().subscribe(newVal => $el.val(picker.formatDate(options.dateFormat, newVal)));
  },
  update: function(element, valueAccessor, allBindingsAccessor) {
    // Get datepickr instance.
    var picker = $(element).data('datetimepickr_inst');

    picker.setDate(ko.unwrap(valueAccessor()));
  }
};

希望对您有所帮助。