Параметр enableTime

enableTime — один из ключевых параметров библиотеки Flatpickr, отвечающий за расширение стандартного выбора даты до выбора даты и времени. При включении этого режима календарный интерфейс дополняется элементами управления часами и минутами, а при необходимости — форматом 12/24 часа, секундной точностью и связанными настройками отображения и парсинга.

Базовое поведение

В стандартной конфигурации Flatpickr работает исключительно с датами. При установке:

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

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

При этом значение в поле ввода трансформируется в формат, заданный параметрами dateFormat и time_24hr (если он активен).

Влияние на формат данных

Включение enableTime напрямую изменяет семантику обработки значения:

  • вместо даты без времени используется объект Date с установленными часами и минутами;
  • строковое представление зависит от dateFormat;
  • при отсутствии явного формата времени Flatpickr добавляет дефолтное отображение времени.

Пример:

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

Результат в поле ввода:

2026-05-30 14:45

Связь с noCalendar

Параметр enableTime часто используется совместно с noCalendar. В этом случае календарная часть полностью скрывается, а компонент превращается в чистый time-picker:

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

Такой режим используется для:

  • выбора времени начала события;
  • настройки расписаний;
  • ограничения временных интервалов без привязки к дате.

Форматы 12 и 24 часа

Поведение времени зависит от параметра time_24hr.

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

При time_24hr: false интерфейс переключается в режим 12-часового формата с AM/PM. В этом режиме:

  • отображаются переключатели AM/PM;
  • внутреннее значение конвертируется в 24-часовой формат;
  • парсинг входных данных учитывает суффиксы времени суток.

При time_24hr: true используется стандартный 24-часовой формат без дополнительных переключателей.

Управление шагом изменения времени

При активированном enableTime становится доступен параметр minuteIncrement, определяющий шаг изменения минут:

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

В этом случае пользователь может выбирать значения времени с шагом:

  • 00 минут
  • 15 минут
  • 30 минут
  • 45 минут

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

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

При включённом времени активно используется параметр minTime и maxTime, задающий допустимые границы:

flatpickr("#input", {
  enableTime: true,
  minTime: "09:00",
  maxTime: "18:00"
});

Поведение интерфейса:

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

Интеграция с defaultDate

При активированном времени defaultDate должен учитывать временную часть:

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

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

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

Визуальное представление времени контролируется через dateFormat, где используются специальные токены:

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

Пример конфигурации с секундной точностью:

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

Поведение при вводе с клавиатуры

При включённом времени Flatpickr расширяет парсер строкового ввода:

  • поддерживается ввод времени через пробел или разделитель;
  • анализируется порядок компонентов (дата + время);
  • при неполном вводе время дополняется значениями по умолчанию.

Пример распознаваемых форматов:

  • 2026-05-30 14:00
  • 2026-05-30T14:00
  • 2026/05/30 14:00

Особенности внутреннего состояния

При активном enableTime внутренний объект состояния Flatpickr включает дополнительные поля:

  • selectedDates содержит полный Date с временем;
  • latestSelectedDateObj отражает текущее значение с учетом временной части;
  • при изменении времени триггерится событие onChange с обновлённым Date.

Поведение при отключении календаря

Комбинация:

noCalendar: true,
enableTime: true

переводит Flatpickr в режим чистого time-picker. В этом режиме:

  • отсутствует сетка дат;
  • отображается только панель времени;
  • навигация ограничена изменением часов и минут.

Совместимость с локализацией

При использовании enableTime локализация затрагивает:

  • подписи AM/PM;
  • форматы отображения времени;
  • разделители в строковом представлении.

Пример:

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

В зависимости от локали меняется отображение времени суток и формат вывода строки.

Влияние на производительность и UX

Включение временного выбора увеличивает сложность интерфейса:

  • добавляется дополнительный DOM-блок управления временем;
  • увеличивается количество обработчиков событий;
  • усложняется логика парсинга ввода.

При этом Flatpickr оптимизирует обновления состояния, минимизируя перерасчёт календарной сетки при изменении только времени.

Типовые сценарии применения

enableTime используется в задачах, где требуется точная временная привязка:

  • планирование событий;
  • бронирование ресурсов по времени;
  • логирование операций;
  • настройка расписаний задач;
  • выбор временных слотов в интерфейсах CRM и ERP-систем.
Оглавление