Форматирование am/pm

При работе с временем существует два основных подхода к отображению часов:

  • 24-часовой формат — от 00 до 23 часов.
  • 12-часовой формат — от 1 до 12 часов с указанием периода суток через AM или PM.

В библиотеке Flatpickr поддерживаются оба варианта. Для отображения времени в 12-часовом формате используется специальный токен форматирования K, который отвечает за вывод обозначений AM и PM.

Пример отображения:

Время Результат
08:30 08:30 AM
11:45 11:45 AM
12:00 12:00 PM
03:15 03:15 PM
11:59 11:59 PM

Использование формата am/pm особенно распространено в приложениях, ориентированных на пользователей из США, Канады, Австралии и ряда других стран, где 12-часовая система является стандартом.

Токен K

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

K

Он возвращает одно из двух значений:

AM

или

PM

Пример:

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

Результат:

9:30 AM

или

4:45 PM

Включение 12-часового режима

Сам по себе токен K не переводит Flatpickr в 12-часовой режим отображения времени. Для этого необходимо использовать параметр:

time_24hr: false

Либо просто не задавать его, поскольку по умолчанию значение равно false.

Пример:

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

Результат:

7:20 PM

Если установить:

time_24hr: true

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

Разница между H и h

При работе с AM/PM важно понимать различие между часовыми токенами.

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

H

Пример:

00
13
22

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

dateFormat: "H:i"

Результат:

21:45

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

h

Пример:

01
07
12

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

dateFormat: "h:i K"

Результат:

09:45 PM

При использовании токена K практически всегда применяется именно h, а не H.

Базовый пример форматирования времени

Конфигурация:

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

Возможный результат:

02:30 PM

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

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

Flatpickr позволяет объединять дату и время в одной строке.

Пример:

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

Результат:

25.08.2025 07:45 PM

Здесь используются:

  • d — день месяца;
  • m — номер месяца;
  • Y — полный год;
  • h — часы в 12-часовом формате;
  • i — минуты;
  • K — AM/PM.

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

Часто внутренний формат хранения отличается от отображаемого пользователю.

Для этого применяется комбинация dateFormat и altFormat.

Пример:

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

Пользователь увидит:

August 15, 2025 09:30 PM

А в поле формы сохранится:

2025-08-15 21:30

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

Работа с полуднем и полуночью

При использовании AM/PM особое значение имеют два момента суток.

Полночь

Полночь отображается как:

12:00 AM

Соответствует времени:

00:00

в 24-часовом формате.

Пример:

dateFormat: "h:i K"

Результат:

12:00 AM

Полдень

Полдень отображается как:

12:00 PM

Соответствует времени:

12:00

в 24-часовом формате.

Результат:

12:00 PM

Это одна из наиболее частых точек путаницы при преобразовании времени между различными форматами.

Использование в локализованных интерфейсах

Даже если интерфейс приложения переведён на русский язык, формат AM/PM может оставаться актуальным.

Пример:

flatpickr("#date", {
    locale: "ru",
    enableTime: true,
    dateFormat: "d.m.Y h:i K"
});

Результат:

12.03.2025 08:15 PM

Названия месяцев и дней недели будут локализованы, но маркеры времени останутся в виде:

AM
PM

поскольку они являются частью международного стандарта 12-часового представления времени.

Использование с altInput

При активации альтернативного поля отображения формат AM/PM обычно применяется именно в нём.

Пример:

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

Видимое поле:

18.09.2025 04:20 PM

Скрытое значение:

2025-09-18 16:20:00

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

Комбинирование с другими токенами времени

Токен K может использоваться совместно с другими временными форматами.

Пример:

dateFormat: "h:i:S K"

Результат:

11:42:08 PM

Где:

  • h — часы;
  • i — минуты;
  • S — секунды;
  • K — AM/PM.

Типичные ошибки

Использование K без h

Неправильно:

dateFormat: "H:i K"

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

18:30 PM

Формально формат работает, но сочетает 24-часовое представление времени с маркером PM.

Корректнее:

dateFormat: "h:i K"

Результат:

06:30 PM

Использование AM/PM вместе с time_24hr

Неправильно:

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

Параметры начинают противоречить друг другу.

Для 12-часового режима следует использовать:

time_24hr: false

Ожидание локализованных обозначений

Некоторые разработчики ожидают увидеть:

ДП
ПП

или аналогичные локальные сокращения.

Flatpickr выводит:

AM
PM

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

Практические сценарии применения

Формат AM/PM особенно полезен в следующих случаях:

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

В таких проектах комбинация:

dateFormat: "h:i K"

или

dateFormat: "d.m.Y h:i K"

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

Оглавление