Параметр time_24hr

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

Назначение и базовое поведение

time_24hr — логический параметр (boolean), который задаёт формат времени:

  • true — 24-часовой формат (например, 14:30)
  • false — 12-часовой формат с AM/PM (например, 2:30 PM)

При включении времени (enableTime: true) Flatpickr автоматически выбирает способ отображения часов в зависимости от значения time_24hr.

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

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

В этом случае интерфейс времени будет отображаться в формате от 00:00 до 23:59.

12-часовой формат (AM/PM)

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

Результат:

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

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

Параметр time_24hr не имеет эффекта без включённого времени:

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

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

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

Flatpickr хранит и возвращает значения времени в стандартизированном формате, но отображение зависит от time_24hr.

24-часовой режим

2026-05-30 18:45

12-часовой режим

2026-05-30 6:45 PM

При этом внутреннее значение остаётся согласованным и не зависит от визуального формата.

Работа с пользовательским вводом

При ручном вводе времени поведение парсинга также зависит от time_24hr.

24-часовой режим

Допустимые значения:

  • 00:00
  • 13:20
  • 23:59

Недопустимо:

  • 13:20 PM (конфликт формата)

12-часовой режим

Допустимо:

  • 1:20 PM
  • 12:00 AM

Flatpickr автоматически интерпретирует AM/PM и конвертирует во внутреннее представление.

Влияние локалей

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

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

Даже при русской локали, где часто используется 24-часовой формат, интерфейс может отображать AM/PM при установленном false.

Взаимодействие с altInput и altFormat

При использовании альтернативного поля ввода (altInput) формат отображения может отличаться от внутреннего значения, но time_24hr влияет на генерацию времени внутри altFormat.

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

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

  • отображение: 30.05.2026 18:45
  • внутреннее значение: стандарт ISO-подобного формата

Типичные сценарии использования

Серверные системы с 24h логикой

time_24hr: true

Используется в системах:

  • логирования событий
  • расписания транспорта
  • админ-панелях

Пользовательские интерфейсы с AM/PM

time_24hr: false

Чаще встречается в:

  • интерфейсах для США и Канады
  • приложениях с упором на UX-упрощение ввода времени

Ограничения и особенности

  • time_24hr не влияет на дату, только на отображение времени
  • не изменяет формат хранения значения, только визуальную и входную интерпретацию
  • требует включённого enableTime
  • может конфликтовать с кастомными dateFormat, если в них явно задан AM/PM

Пример комплексной конфигурации

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

Поведение:

  • календарь отображается стандартно
  • время вводится в 24-часовом формате
  • значение возвращается в формате YYYY-MM-DD HH:mm

Поведение при переключении режима динамически

Flatpickr не всегда корректно обновляет интерфейс при изменении time_24hr после инициализации. Обычно требуется переинициализация экземпляра:

instance.destroy();

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

Совместимость с другими параметрами времени

time_24hr тесно связан с:

  • enableTime — обязательный переключатель функциональности времени
  • hourIncrement — шаг изменения часов
  • minuteIncrement — шаг изменения минут
  • defaultHour и defaultMinute — начальные значения
  • minTime / maxTime — ограничения диапазона

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

Оглавление