Форматирование времени

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

Форматирование времени тесно связано с параметрами enableTime, enableSeconds, time_24hr, dateFormat, altInput и altFormat, поскольку именно их комбинация определяет итоговый внешний вид значения.

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

Для включения выбора времени используется параметр:

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

После активации времени календарь получает дополнительную панель выбора часов и минут.

По умолчанию формат отображения выглядит следующим образом:

2025-06-15 14:30

Структура этого значения определяется настройкой dateFormat.

Параметр dateFormat

Настройка dateFormat задаёт шаблон формирования строки, записываемой в поле ввода.

Пример:

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

Результат:

2025-06-15 14:30

Здесь используются специальные токены:

Токен	Значение
H	часы (00–23)
h	часы (01–12)
i	минуты
S	секунды
K	AM/PM

Формат 24 часа

Наиболее распространённый вариант отображения времени — двадцатичетырёхчасовой формат.

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

Пример результата:

08:45

или

17:20

Использование параметра:

time_24hr: true

отключает AM/PM и переводит интерфейс на привычный европейский формат времени.

Формат 12 часов

Для американского формата используется комбинация токенов h и K.

flatpickr("#meeting", {
    enableTime: true,
    dateFormat: "h:i K"
});

Результат:

03:25 PM

или

09:10 AM

В таком режиме Flatpickr автоматически отображает переключатель AM/PM.

Токен H — часы в формате 24 часа

Токен H выводит часы с ведущим нулём.

Пример:

dateFormat: "H:i"

Значения:

Диапазон:

00–23

Такой вариант подходит для большинства административных систем, CRM, ERP и корпоративных приложений.

Токен h — часы в формате 12 часов

Токен h используется совместно с K.

Пример:

dateFormat: "h:i K"

Результаты:

01:00 PM
09:45 AM
11:59 PM

Диапазон:

01–12

Без токена K значение может стать неоднозначным.

Например:

dateFormat: "h:i"

даст результат:

08:30

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

Токен i — минуты

Токен i отвечает за отображение минут.

Пример:

dateFormat: "H:i"

Результаты:

10:05
10:30
10:59

Минуты всегда выводятся двумя цифрами.

Форматирование секунд

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

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

После этого можно использовать токен S.

dateFormat: "H:i:S"

Результат:

14:20:35

Без параметра:

enableSeconds: true

секунды не будут отображаться в интерфейсе выбора времени.

Токен S — секунды

Токен выводит секунды в диапазоне:

00–59

Пример:

dateFormat: "H:i:S"

Результаты:

08:15:07
16:40:59
22:10:30

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

Токен K — индикатор AM/PM

Токен отображает часть суток.

Пример:

dateFormat: "h:i K"

Результаты:

08:30 AM
02:15 PM
11:59 PM

Возможные значения:

AM
PM

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

Форматирование только времени

Flatpickr может работать как чистый выборщик времени без календаря.

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

Результат:

18:45

Интерфейс будет содержать только блок времени.

Отображение времени с секундами

Полноценный формат времени:

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

Результат:

21:05:48

Такой вариант часто используется в системах автоматизации и технических панелях управления.

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

Flatpickr не ограничивает использование двоеточия.

Можно задавать собственные разделители:

dateFormat: "H-i"

Результат:

14-30

Или:

dateFormat: "H.i"

Результат:

14.30

Также возможны комбинированные варианты:

dateFormat: "H часов i минут"

Результат:

14 часов 30 минут

Одновременное форматирование даты и времени

Наиболее распространённая конфигурация:

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

Результат:

15.06.2025 14:30

Другой пример:

dateFormat: "Y/m/d H:i:S"

Результат:

2025/06/15 14:30:25

Использование altInput для красивого отображения

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

Для этого применяется связка:

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

В поле отображается:

15.06.2025 14:30

А исходное значение остаётся:

2025-06-15 14:30:00

Подобный подход особенно полезен при интеграции с серверными API и базами данных.

Форматирование времени для серверов

Многие серверные приложения ожидают формат ISO-подобного вида.

Пример:

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

Результат:

2025-06-15 14:30:25

Такой формат удобно передавать в:

PHP;
Node.js;
Python;
Java;
.NET;
базы данных SQL.

Форматирование для журналов событий

Для логирования часто используются секунды.

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

Результат:

2025-06-15 14:30:47

Это позволяет фиксировать события с высокой точностью.

Форматирование времени для пользовательских интерфейсов

Для интерфейсов, ориентированных на человека, чаще выбирают лаконичные форматы.

Пример:

altFormat: "H:i"

Результат:

09:45

Либо:

altFormat: "h:i K"

Результат:

09:45 AM

Такой подход делает формы более читаемыми и уменьшает визуальный шум.

Распространённые ошибки

Использование секунд без enableSeconds

Неверно:

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

Секунды присутствуют в формате, но элемент выбора секунд отсутствует.

Правильно:

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

Смешивание 24-часового и 12-часового форматов

Проблемный пример:

dateFormat: "H:i K"

Результат может выглядеть нелогично:

17:30 PM

Корректные варианты:

"H:i"

или

"h:i K"

Отсутствие K при использовании h

Неверно:

dateFormat: "h:i"

Результат:

08:15

Неясно, утро это или вечер.

Предпочтительно:

dateFormat: "h:i K"

Результат:

08:15 PM

Практические шаблоны форматирования времени

Только часы и минуты:

"H:i"

Результат:

14:30

Часы, минуты и секунды:

"H:i:S"

Результат:

14:30:45

Американский формат:

"h:i K"

Результат:

02:30 PM

Дата и время:

"d.m.Y H:i"

Результат:

15.06.2025 14:30

Дата, время и секунды:

"d.m.Y H:i:S"

Результат:

15.06.2025 14:30:45

ISO-подобный формат:

"Y-m-d H:i:S"

Результат:

2025-06-15 14:30:45

Система форматирования времени Flatpickr предоставляет достаточный набор токенов для построения как компактных пользовательских представлений, так и технических форматов хранения данных. Благодаря комбинации dateFormat, altFormat, enableTime, enableSeconds и time_24hr можно реализовать практически любой сценарий отображения времени в веб-приложении.