TimePicker

Компонент TimePicker из библиотеки Ant Design предназначен для выбора времени в формате часов, минут и при необходимости секунд. Он строится поверх стандартного input и предоставляет удобный интерфейс с выпадающим списком для быстрого выбора времени.

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

import { TimePicker } from 'antd';
import 'antd/dist/reset.css'; // Сброс стилей для корректного отображения

const App = () => (
  <TimePicker defaultValue={moment('12:08:23', 'HH:mm:ss')} format={'HH:mm:ss'} />
);

Ключевые моменты:

  • defaultValue задаёт начальное время.
  • format определяет формат отображения (например, HH:mm или HH:mm:ss).
  • Компонент интегрируется с библиотекой moment или с dayjs (начиная с последних версий Ant Design рекомендуется dayjs).

Настройка формата времени

TimePicker поддерживает различные форматы времени:

<TimePicker format="HH:mm" />         // Только часы и минуты
<TimePicker format="HH:mm:ss" />      // Часы, минуты и секунды
<TimePicker format="hh:mm A" />       // 12-часовой формат с AM/PM

Примечание: Использование 12-часового формата требует включения опции use12Hours={true}.

<TimePicker use12Hours format="h:mm A" />

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

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

import { useState } from 'react';
import { TimePicker } from 'antd';
import dayjs from 'dayjs';

const App = () => {
  const [time, setTime] = useState(dayjs('12:00', 'HH:mm'));

  const handleChange = (value) => {
    setTime(value);
    console.log('Выбранное время:', value.format('HH:mm'));
  };

  return <TimePicker value={time} onCha nge={handleChange} format="HH:mm" />;
};
  • value синхронизирует текущее время с состоянием компонента.
  • onChange срабатывает при каждом изменении значения.

Минимальное и максимальное время

Можно ограничить диапазон выбора времени с помощью disabledHours, disabledMinutes и disabledSeconds:

<TimePicker
  disabledHours={() => [0, 1, 2, 3]}     // Запрещает выбор часов с 0 до 3
  disabledMinutes={() => [30, 31, 32]}  // Запрещает выбор минут 30–32
  disabledSeconds={() => [0, 15, 30, 45]} // Запрещает выбор этих секунд
/>

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

Шаги для выбора времени

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

<TimePicker
  minuteStep={15}    // Позволяет выбирать только каждые 15 минут
  secondStep={10}    // Позволяет выбирать секунды с шагом 10
/>
  • hourStep — шаг изменения часов.
  • minuteStep — шаг изменения минут.
  • secondStep — шаг изменения секунд.

Встроенные варианты отображения

TimePicker может отображаться в двух основных режимах:

  1. Стандартный селектор с выпадающим меню.
  2. Инлайн-режим (open={true}) для отображения без клика:
<TimePicker open defaultValue={dayjs('12:00', 'HH:mm')} />

Форматирование и локализация

Ant Design поддерживает локализацию формата времени:

import locale from 'antd/es/locale/ru_RU';

<TimePicker locale={locale} format="HH:mm" />

Эффекты локализации:

  • Поддержка русского языка для AM/PM и всплывающих элементов.
  • Корректное отображение дней недели и месяцев в связанных компонентах (если используется совместно с DatePicker).

Состояния компонента

TimePicker поддерживает различные визуальные состояния:

  • disabled — делает компонент недоступным.
  • allowClear={false} — запрещает очищение выбранного времени.
  • placeholder="Выберите время" — текст по умолчанию, если значение пусто.
<TimePicker disabled placeholder="Недоступно" />
<TimePicker allowClear={false} />

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

В форме Ant Design компонент работает через Form.Item:

import { Form, TimePicker, Button } from 'antd';
import dayjs from 'dayjs';

<Form
  onFin ish={(values) => console.log(values)}
>
  <Form.Item
    name="appointment"
    label="Время встречи"
    rules={[{ required: true, message: 'Пожалуйста, выберите время' }]}
  >
    <TimePicker defaultValue={dayjs('09:00', 'HH:mm')} format="HH:mm" />
  </Form.Item>
  <Form.Item>
    <Button type="primary" htmlType="submit">Отправить</Button>
  </Form.Item>
</Form>
  • Автоматическая валидация через rules.
  • Значение компонента передаётся в объект формы как dayjs объект.

Расширенные возможности

  • Добавление панели с дополнительными кнопками (addon) для кастомных действий:
<TimePicker
  addon={() => <Button size="small">Сбросить</Button>}
/>
  • Интеграция с RangePicker для выбора диапазона времени:
import { TimePicker } from 'antd';
const { RangePicker } = TimePicker;

<RangePicker format="HH:mm" />

  • События открытия/закрытия:

    • onOpenChange(open) — срабатывает при открытии или закрытии выпадающего списка.
    • onFocus / onBlur — стандартные события input.

Оптимизация UX

  • Использование use12Hours для интерфейсов, где привычен 12-часовой формат.
  • Настройка шагов (minuteStep, secondStep) для упрощения выбора стандартных значений.
  • Ограничение диапазона времени через disabledHours/Minutes/Seconds для предотвращения ошибок ввода.

TimePicker Ant Design сочетает наглядность, гибкость и простоту интеграции с формами, что делает его ключевым инструментом для интерфейсов, где требуется выбор времени.

Оглавление