12 и 24-часовой формат

В интерфейсах, связанных с выбором или отображением времени, используются два основных стандарта:

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

Библиотека React Aria предоставляет инфраструктуру для создания полностью доступных компонентов времени, которые корректно работают с обоими форматами. Основная логика основана на международных стандартах локализации и на утилитах библиотеки @internationalized/date.

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

  • локализации интерфейсов
  • обеспечения привычного отображения времени для разных регионов
  • корректной работы скринридеров
  • унификации логики ввода времени

В React Aria формат времени определяется автоматически на основе локали, однако может контролироваться и программно.

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

12-часовой формат

12-часовой формат делит сутки на два периода:

  • AM — от полуночи до полудня
  • PM — от полудня до полуночи

Примеры:

Время Значение
12:00 AM 00:00
9:30 AM 09:30
12:00 PM 12:00
7:45 PM 19:45

Особенности формата:

  • используется диапазон 1–12
  • требуется индикатор периода
  • широко распространён в США, Канаде и некоторых других странах

24-часовой формат

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

Время Значение
00:00 полночь
09:30 утро
12:00 полдень
19:45 вечер

Особенности:

  • диапазон 00–23
  • отсутствует AM/PM
  • используется в большинстве стран мира
  • чаще применяется в технических системах

Поддержка времени в React Aria

React Aria предоставляет несколько компонентов для работы со временем:

  • TimeField
  • TimePicker
  • DatePicker
  • DateTimePicker

Все они используют тип Time из библиотеки @internationalized/date.

Пример импорта:

import {TimeField} from 'react-aria-components';
import {Time} from '@internationalized/date';

Базовый компонент TimeField

TimeField — основной компонент ввода времени.

Пример:

import {TimeField} from 'react-aria-components';
import {Time} from '@internationalized/date';

export default function Example() {
  return (
    <TimeField
      label="Время"
      defaultValue={new Time(9, 30)}
    />
  );
}

Компонент автоматически:

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

Определение формата через локаль

Формат времени определяется через Intl API.

React Aria использует:

Intl.DateTimeFormat

Например:

Локаль Формат
en-US 12-часовой
en-GB 24-часовой
de-DE 24-часовой
fr-FR 24-часовой

Пример установки локали:

import {I18nProvider} from 'react-aria-components';

<I18nProvider locale="en-US">
  <App />
</I18nProvider>

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

Принудительное использование 12-часового формата

React Aria позволяет управлять форматом через параметр hourCycle.

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

Значение Формат
h11 0–11
h12 1–12
h23 0–23
h24 1–24

Пример:

<TimeField
  label="Время"
  hourCycle={12}
/>

Это включает отображение AM/PM.

Использование 24-часового формата

Пример:

<TimeField
  label="Время"
  hourCycle={24}
/>

Теперь:

  • исчезает индикатор AM/PM
  • часы отображаются от 00 до 23

Сегментная архитектура TimeField

React Aria реализует время через сегменты.

Каждая часть времени — отдельный интерактивный элемент:

  • часы
  • минуты
  • секунды
  • период AM/PM

Пример DOM-структуры:

[09] : [30] [AM]

Каждый сегмент:

  • можно изменять клавишами
  • доступен скринридерам
  • имеет собственную валидацию

Компоненты сегментов

Внутри TimeField используются:

  • DateInput
  • DateSegment

Пример кастомной разметки:

import {
  TimeField,
  Label,
  DateInput,
  DateSegment
} from 'react-aria-components';

function MyTimeField() {
  return (
    <TimeField label="Время">
      <Label>Время</Label>
      <DateInput>
        {(segment) => <DateSegment segment={segment} />}
      </DateInput>
    </TimeField>
  );
}

Сегменты автоматически создаются на основе формата времени.

Сегмент AM/PM

В 12-часовом формате добавляется дополнительный сегмент:

AM/PM

Он также доступен для редактирования.

Пример:

09 : 45 PM

Переход между AM и PM выполняется:

  • стрелками клавиатуры
  • вводом текста
  • колесом мыши

Работа с типом Time

Тип Time хранит:

  • часы
  • минуты
  • секунды
  • миллисекунды

Пример создания:

new Time(14, 30)

Это значение интерпретируется как:

14:30

При 12-часовом отображении:

2:30 PM

Конвертация между форматами

React Aria не требует ручного преобразования.

Компонент сам отображает:

  • 14:30 → 2:30 PM
  • 02:30 → 2:30 AM

Хранение всегда происходит в 24-часовом виде.

Это упрощает:

  • работу с API
  • хранение в базе данных
  • вычисления

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

Можно задать диапазон доступного времени.

Пример:

<TimeField
  label="Рабочее время"
  minValue={new Time(9)}
  maxValue={new Time(18)}
/>

Теперь допустимы только значения:

09:00 – 18:00

В 12-часовом формате отображение будет:

9:00 AM – 6:00 PM

Добавление секунд

По умолчанию используются:

  • часы
  • минуты

Чтобы добавить секунды:

<TimeField
  label="Точное время"
  granularity="second"
/>

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

09 : 30 : 45

Работа с TimePicker

TimePicker объединяет:

  • поле ввода
  • выпадающий список времени

Пример:

import {TimePicker} from 'react-aria-components';

<TimePicker
  label="Выберите время"
/>

Формат времени в выпадающем списке зависит от:

  • локали
  • hourCycle

Доступность (Accessibility)

React Aria реализует поддержку ARIA Time Field Pattern.

Скринридеры озвучивают сегменты:

Пример:

Hours 9
Minutes 30
AM

Поддерживаются:

  • NVDA
  • JAWS
  • VoiceOver
  • TalkBack

Управление клавиатурой

Основные клавиши:

Клавиша Действие
Tab переход между сегментами
ArrowUp увеличение значения
ArrowDown уменьшение
ArrowLeft предыдущий сегмент
ArrowRight следующий сегмент

В 12-часовом формате стрелки также переключают AM/PM.

Обработка изменений

Для получения выбранного времени используется onChange.

function Example() {
  const [time, setTime] = useState(null);

  return (
    <TimeField
      label="Время"
      value={time}
      onCha nge={setTime}
    />
  );
}

Полученное значение:

Time {
  hour: 14,
  minute: 30
}

Независимо от отображаемого формата.

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

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

useDateFormatter

Пример:

import {useDateFormatter} from 'react-aria';

let formatter = useDateFormatter({
  timeStyle: "short"
});

Формат автоматически будет:

  • 9:30 AM
  • или 09:30

в зависимости от локали.

Практическая схема работы

  1. Внутреннее значение хранится в 24-часовом формате
  2. React Aria определяет формат через локаль
  3. hourCycle позволяет переопределить формат
  4. Компонент создаёт сегменты времени
  5. Скринридеры получают структурированные элементы
  6. Пользователь взаимодействует с каждым сегментом отдельно

Типичная архитектура компонента времени

TimeField
 ├── Label
 ├── DateInput
 │    ├── DateSegment (hour)
 │    ├── DateSegment (minute)
 │    └── DateSegment (dayPeriod)
 └── Validation

Сегмент dayPeriod появляется только при 12-часовом формате.

Особенности международной локализации

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

Язык AM PM
Английский AM PM
Китайский 上午 下午
Японский 午前 午後

React Aria автоматически применяет правильные символы через Intl.

Типичные ошибки при работе с форматами времени

Хранение времени в строке

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

"2:30 PM"

Правильно:

Time(14, 30)

Ручная конвертация форматов

React Aria уже выполняет преобразование автоматически.

Ручная логика обычно приводит к ошибкам.

Игнорирование локали

Формат времени должен зависеть от региона пользователя.

Это особенно важно для:

  • международных приложений
  • систем бронирования
  • календарей
  • расписаний

Когда использовать 12-часовой формат

Подходит для:

  • пользовательских приложений
  • мобильных интерфейсов
  • систем США

Примеры:

  • календарь
  • будильник
  • планировщик встреч

Когда использовать 24-часовой формат

Подходит для:

  • профессиональных систем
  • транспорта
  • логистики
  • военных систем
  • медицины

Примеры:

18:45
22:10
04:30

Формат исключает неоднозначность AM/PM.

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

При использовании DatePicker время может отображаться рядом с датой.

Пример:

20 March 2026, 2:30 PM

или

20.03.2026 14:30

Формат снова определяется локалью.

Резюме архитектуры времени в React Aria

Основные принципы:

  • хранение времени в 24-часовом формате
  • отображение через Intl
  • автоматическая локализация
  • сегментная структура ввода
  • доступность для скринридеров
  • управление форматом через hourCycle

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

Оглавление