Включение выбора времени

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

Активация режима времени

Ключевая настройка:

flatpickr("#input", {
  enableTime: true
});

При включении enableTime интерфейс дополняется блоком выбора времени, а внутренняя модель данных начинает хранить объект Date с часовыми и минутными компонентами.

Без дополнительных настроек время отображается в 12-часовом формате и наследует локальные настройки среды выполнения.

24-часовой формат

Для управления форматом отображения используется параметр time_24hr.

flatpickr("#input", {
  enableTime: true,
  time_24hr: true
});

Поведение:

  • отключение AM/PM переключателя
  • отображение диапазона 00–23
  • унификация формата ввода и вывода

Использование 24-часового режима критично для систем, где требуется строгая временная нормализация (логирование событий, серверные операции, расписания).

Формат отображения даты и времени

Параметр dateFormat определяет итоговую строку:

flatpickr("#input", {
  enableTime: true,
  time_24hr: true,
  dateFormat: "Y-m-d H:i"
});

Основные токены времени:

  • H — часы (24h)
  • h — часы (12h)
  • i — минуты
  • K — AM/PM маркер
  • S — секунды (при включении соответствующей опции)

Комбинирование токенов позволяет формировать строгие шаблоны сериализации.

Шаг изменения минут

Точность выбора времени регулируется параметром minuteIncrement.

flatpickr("#input", {
  enableTime: true,
  time_24hr: true,
  minuteIncrement: 5
});

Поведение:

  • ограничение доступных значений минут
  • упрощение пользовательского ввода
  • снижение вариативности данных

Типичные значения: 1, 5, 10, 15, 30.

Начальное значение времени

Параметр defaultDate задаёт стартовое значение компонента.

flatpickr("#input", {
  enableTime: true,
  defaultDate: "2026-05-30 14:30"
});

При передаче строки библиотека парсит её согласно текущему dateFormat. При передаче объекта Date значение используется напрямую без преобразований.

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

Контроль доступных значений осуществляется через minDate и maxDate, которые при активном времени распространяются на полный timestamp.

flatpickr("#input", {
  enableTime: true,
  minDate: "2026-05-30 08:00",
  maxDate: "2026-05-30 18:00"
});

Особенности:

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

Управление секундной точностью

При необходимости высокой детализации времени включается параметр enableSeconds.

flatpickr("#input", {
  enableTime: true,
  enableSeconds: true,
  time_24hr: true,
  dateFormat: "Y-m-d H:i:S"
});

Расширение модели данных:

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

Скрытие календаря при работе только со временем

При сценариях, где дата не требуется, используется комбинация noCalendar и enableTime.

flatpickr("#input", {
  enableTime: true,
  noCalendar: true,
  time_24hr: true,
  dateFormat: "H:i"
});

Поведение:

  • календарная сетка полностью скрывается
  • интерфейс превращается в time-picker
  • внутренне всё равно используется объект Date, но дата фиксируется на базовом значении

Взаимодействие с альтернативным вводом

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

flatpickr("#input", {
  enableTime: true,
  altInput: true,
  altFormat: "F j, H:i",
  dateFormat: "Y-m-d H:i"
});

Разделение форматов:

  • dateFormat — внутреннее представление
  • altFormat — отображение пользователю

Такой подход снижает риск некорректного ручного ввода.

Ограничение доступных часов

Низкоуровневая настройка осуществляется через функции disable и кастомную логику фильтрации.

flatpickr("#input", {
  enableTime: true,
  time_24hr: true,
  disable: [
    function(date) {
      const hour = date.getHours();
      return hour < 9 || hour > 17;
    }
  ]
});

Поведение:

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

Автоматическая нормализация времени

При вводе значений вне допустимого диапазона библиотека выполняет нормализацию:

  • округление минут согласно minuteIncrement
  • коррекция часов при выходе за границы
  • приведение к ближайшему допустимому timestamp

Механизм предотвращает сохранение невалидных состояний без необходимости ручной валидации.

Особенности внутреннего представления

Включение времени переводит модель в расширенный формат Date, где:

  • дата хранится в UTC-совместимом представлении
  • время накладывается поверх локальной временной зоны
  • сериализация зависит от dateFormat, а не от объекта Date

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

Оглавление