Плагин confirmDate

Плагин confirmDate в экосистеме Flatpickr добавляет механизм подтверждения выбора даты или диапазона дат перед окончательной фиксацией значения в инпуте. Основная идея заключается в разрыве между моментом выбора пользователем даты в календаре и моментом записи этого значения в поле ввода. Это особенно важно в интерфейсах, где требуется предотвращение случайных изменений, либо где выбор даты должен быть явно подтверждён действием.

Поведение плагина проявляется в появлении дополнительных элементов управления внутри календаря, чаще всего кнопок подтверждения и отмены. Пока подтверждение не выполнено, значение инпута остаётся прежним.

Подключение плагина confirmDate

Flatpickr позволяет подключать плагины через массив plugins при инициализации.

import flatpickr from "flatpickr";
import confirmDatePlugin from "flatpickr/dist/plugins/confirmDate/confirmDate";

flatpickr("#dateInput", {
  enableTime: true,
  plugins: [
    confirmDatePlugin({})
  ]
});

В данном случае подключается базовая версия confirmDate без дополнительных параметров. Плагин активирует панель подтверждения в нижней части календаря.

Базовая конфигурация

Плагин принимает объект настроек, позволяющий управлять поведением кнопок и форматом отображения времени.

confirmDatePlugin({
  confirmText: "OK",
  cancelText: "Cancel",
  showAlways: false,
  theme: "light"
});

Основные параметры

  • confirmText — текст кнопки подтверждения
  • cancelText — текст кнопки отмены
  • showAlways — определяет постоянное отображение панели подтверждения
  • theme — визуальная тема панели (например, light или dark)

Логика работы подтверждения

При активации календаря Flatpickr начинает отслеживать изменения выбора даты. Однако обновление input.value блокируется до момента подтверждения.

Внутренний цикл поведения можно описать следующим образом:

  1. Пользователь выбирает дату или диапазон
  2. Flatpickr сохраняет значение во внутреннем состоянии (selectedDates)
  3. Плагин перехватывает событие изменения
  4. Значение не передаётся в DOM-инпут
  5. Ожидается действие подтверждения
  6. При подтверждении значение фиксируется
  7. При отмене состояние возвращается к предыдущему

Поведение при работе с временем

При включённой опции enableTime подтверждение распространяется также на изменения времени.

flatpickr("#datetime", {
  enableTime: true,
  dateFormat: "Y-m-d H:i",
  plugins: [
    confirmDatePlugin({
      confirmText: "Применить",
      cancelText: "Сброс"
    })
  ]
});

В этом режиме изменения часов и минут считаются частью единого состояния, которое фиксируется только после подтверждения.

Взаимодействие с диапазонами дат

При использовании режима mode: "range" плагин работает с двумя точками выбора — началом и концом диапазона. Подтверждение применяется ко всему диапазону как к единому объекту.

flatpickr("#range", {
  mode: "range",
  plugins: [
    confirmDatePlugin({
      confirmText: "Выбрать период",
      cancelText: "Очистить"
    })
  ]
});

Особенность заключается в том, что промежуточные изменения диапазона не влияют на значение инпута до завершения подтверждения.

Поведение кнопки отмены

Кнопка отмены в confirmDate не просто закрывает календарь, но и откатывает состояние выбора к последнему подтверждённому значению.

Механизм включает:

  • сброс selectedDates к предыдущему состоянию
  • восстановление отображения календаря
  • отмену временных изменений времени (если включено)

Опция showAlways

Параметр showAlways изменяет модель взаимодействия интерфейса. При значении true панель подтверждения отображается постоянно, даже если пользователь не изменяет значение.

confirmDatePlugin({
  showAlways: true
});

Такой режим используется в интерфейсах, где требуется явная фиксация каждого выбора, даже если он совпадает с текущим значением.

Кастомизация внешнего вида

Плагин добавляет собственные CSS-классы, которые позволяют изменять внешний вид панели управления.

Основные классы:

  • .flatpickr-confirm — контейнер панели
  • .flatpickr-confirm-button — кнопки подтверждения
  • .flatpickr-cancel-button — кнопки отмены

Пример стилизации:

.flatpickr-confirm {
  display: flex;
  justify-content: space-between;
  padding: 8px;
  border-top: 1px solid #e6e6e6;
}

.flatpickr-confirm-button {
  background-color: #4caf50;
  color: white;
}

.flatpickr-cancel-button {
  background-color: #f44336;
  color: white;
}

Интеграция с событиями Flatpickr

Flatpickr предоставляет события жизненного цикла, которые можно использовать совместно с confirmDate для расширенного управления поведением.

Основные события:

  • onChange — вызывается при изменении выбора
  • onOpen — при открытии календаря
  • onClose — при закрытии
  • onValueUpdate — при обновлении значения

При использовании confirmDate важно учитывать, что onChange может срабатывать до подтверждения, но значение в input остаётся неизменным.

Сценарии использования в интерфейсах

Формы бронирования

В системах бронирования подтверждение предотвращает случайный выбор даты и уменьшает количество ошибочных отправок формы.

Финансовые приложения

При выборе отчётных периодов подтверждение обеспечивает контроль над изменением фильтров данных.

Административные панели

В интерфейсах с фильтрацией данных подтверждение предотвращает лишние перерисовки таблиц при каждом клике по календарю.

Особенности внутренней реализации

Плагин работает через расширение механизма Flatpickr instance. При инициализации создаётся дополнительный слой UI, который синхронизируется с внутренним состоянием календаря.

Основные элементы реализации:

  • перехват метода setDate
  • буферизация selectedDates
  • управление состоянием config
  • внедрение DOM-узла панели подтверждения

Ограничения поведения

При использовании confirmDate проявляются особенности, которые связаны с отложенной фиксацией состояния:

  • значение input не обновляется до подтверждения
  • программные вызовы setDate могут требовать дополнительной синхронизации
  • кастомные форматы отображения могут не применяться до фиксации значения
  • при внешнем сбросе состояния требуется ручная очистка буфера плагина
Оглавление