Пользовательские Flatpickr Knockout переплет

Question

Я пытаюсь создать нокаутирующую привязку для Flatpickr, но безуспешно. Я попытался настроить код из принятого ответа здесь безрезультатно. 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. Это прекрасно работает для всех моих входных данных, кроме тех, которые используют привязку datetimepicker, которую @atitsbest предоставил мне.

Поля datetimepicker заполняются в первый раз, но как только я пролистываю мимо них свойство viewmodel для этой записи, каким-то образом устанавливается в нуль.

РЕДАКТИРОВАТЬ 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"; сейчас оно стреляет.
• созданы некоторые параметры по умолчанию, даже если установлены пользовательские параметры; полезно для формата даты по умолчанию.
• заменил функцию "update" подпиской для обновления наблюдаемой;
• связанное значение теперь всегда является датой.

Новая привязка:

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

Надеюсь, это поможет.