Комбинирование даты и времени

Комбинирование даты и времени в Flatpickr строится вокруг базового механизма расширения календаря часовым интерфейсом. Ключевой точкой становится параметр enableTime, который добавляет к календарю блок выбора времени и переводит компонент из режима «дата» в режим «дата + время».

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

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

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

Формат представления и базовая сериализация

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

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

В данном случае формат включает:

  • Y — год
  • m — месяц
  • d — день
  • H — часы в 24-часовом формате
  • i — минуты

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

Переключение на 24-часовой формат

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

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

Особенности поведения:

  • диапазон часов становится 0–23
  • исчезает переключатель AM/PM
  • форматирование упрощается для локалей, использующих 24-часовую систему

Шаг изменения минут и часов

Для управления дискретностью выбора времени используются параметры minuteIncrement и hourIncrement. Они задают шаг изменения соответствующих значений в интерфейсе.

flatpickr("#input", {
  enableTime: true,
  minuteIncrement: 10,
  hourIncrement: 2
});

minuteIncrement

Определяет интервал минут:

  • 1 — точная настройка
  • 5 — стандартное значение по умолчанию
  • 10, 15, 30 — распространённые интервалы для упрощённого выбора

hourIncrement

Используется реже, но влияет на навигацию по часам:

  • 1 — стандартное поведение
  • 2–3 — ускоренный выбор времени
  • большие значения — ограничение доступных часов

Начальное значение с учётом времени

Параметр defaultDate поддерживает передачу как даты, так и времени одновременно. При этом важно учитывать формат строки, чтобы Flatpickr корректно распознал компоненты времени.

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

При передаче строки без времени, при включённом enableTime, часы и минуты будут установлены в значение по умолчанию (обычно 00:00 или текущее время в зависимости от конфигурации и режима инициализации).

Ограничение диапазона с учётом времени

При использовании временного режима параметры minDate и maxDate начинают учитывать не только день, но и конкретное время. Это позволяет задавать точные границы допустимого выбора.

flatpickr("#input", {
  enableTime: true,
  dateFormat: "Y-m-d H:i",
  minDate: "2026-05-30 09:00",
  maxDate: "2026-05-30 18:00"
});

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

Синхронизация отображения и внутреннего состояния

Flatpickr поддерживает два уровня представления:

  • внутренний объект Date
  • строковое отображение в input

При включённом времени эти уровни начинают расходиться сильнее, чем в режиме только даты, поскольку добавляется точность до минут (или секунд, если включены соответствующие настройки).

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

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

В этом случае:

  • dateFormat отвечает за сохранение
  • altFormat отвечает за отображение пользователю

Работа с локалями и отображением времени

При комбинированном режиме даты и времени локаль влияет на:

  • формат 12/24 часа
  • отображение AM/PM
  • порядок элементов в интерфейсе
  • подписи элементов времени

Flatpickr не изменяет внутреннее значение в зависимости от локали, но визуальное представление может значительно отличаться.

Поведение при вводе вручную

При ручном вводе значения с временем парсер Flatpickr анализирует строку согласно dateFormat. Ошибки чаще всего возникают при несоответствии формата:

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

Корректные строки:

  • 2026-05-30 14:30
  • 2026-01-01 00:00

Некорректные:

  • 30-05-2026 2:30 PM (при 24-часовом формате)
  • 2026/05/30 (без времени при строгом формате)

Инициализация с текущим временем

При отсутствии defaultDate и включённом enableTime Flatpickr может использовать текущее системное время как основу для инициализации. Это поведение зависит от контекста и может быть изменено через дополнительные настройки или явное задание значения.

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

Особенности комбинированного режима в логике сравнения дат

При сравнении значений в режиме даты и времени учитывается полный таймстамп. Это означает, что:

  • 2026-05-30 10:00 и 2026-05-30 11:00 считаются разными значениями
  • ограничения диапазонов работают с точностью до минут
  • сортировка дат включает временную компоненту

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

Работа с секундами (при расширении конфигурации)

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

  • часы
  • минуты
  • секунды
flatpickr("#input", {
  enableTime: true,
  enableSeconds: true,
  time_24hr: true,
  dateFormat: "Y-m-d H:i:S"
});

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

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

При отправке формы значение поля с включённым временем передаётся как строка, соответствующая dateFormat. Серверная обработка должна учитывать полный формат, включая временную часть.

В типичных сценариях используются ISO-подобные форматы или стандартизированные строки, обеспечивающие однозначную интерпретацию:

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

Flatpickr сам по себе не принуждает к ISO, но позволяет легко привести формат к нему через dateFormat.

Оглавление