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

Компонент TimePicker из библиотеки MUI предназначен для выбора времени пользователем. Он является частью набора компонентов @mui/x-date-pickers, которые обеспечивают удобную работу с датой и временем в приложениях на React. Основные возможности TimePicker включают выбор часов и минут, поддержку форматов 12/24 часа, работу с локализацией и кастомизацию отображения.

Для использования TimePicker необходимо импортировать его из пакета:

import { TimePicker } from '@mui/x-date-pickers/TimePicker';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';

Использование LocalizationProvider обязательно для корректной работы TimePicker, так как он управляет форматированием времени и локализацией. В качестве адаптера можно использовать Day.js, date-fns, Moment.js или Luxon.

<LocalizationProvider dateAdapter={AdapterDayjs}>
  <TimePicker
    label="Выберите время"
    value={timeValue}
    onCha nge={(newValue) => setTimeValue(newValue)}
  />
</LocalizationProvider>

Свойства TimePicker

  • value – текущее выбранное значение времени. Обычно хранится в состоянии React.
  • onChange – функция обратного вызова, вызываемая при изменении времени. Получает новый объект времени.
  • label – текстовая метка для поля ввода.
  • format – задает формат отображения времени, например 'HH:mm' или 'hh:mm A'.
  • ampm – логическое значение, определяющее 12-часовой формат (true) или 24-часовой (false).
  • minutesStep – шаг для выбора минут (например, 5 для кратных пяти минут).
  • disabled – блокирует компонент.
  • readOnly – делает компонент доступным только для чтения, без возможности редактирования через UI.
  • minTime / maxTime – ограничения диапазона времени.
<TimePicker
  label="Выберите время"
  value={timeValue}
  onCha nge={(newValue) => setTimeValue(newValue)}
  ampm={false}
  minutesStep={15}
  minTime={dayjs('08:00', 'HH:mm')}
  maxTime={dayjs('20:00', 'HH:mm')}
/>

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

Для корректного отображения времени важно использовать LocalizationProvider и соответствующий адаптер даты. В MUI TimePicker поддерживает локали через библиотеку адаптера, например Day.js:

import 'dayjs/locale/ru';

<LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale="ru">
  <TimePicker
    label="Время"
    value={timeValue}
    onCha nge={(newValue) => setTimeValue(newValue)}
    ampm={false}
  />
</LocalizationProvider>

Формат времени контролируется свойством format, которое учитывает 12- и 24-часовой режим. Для пользовательского отображения можно комбинировать символы формата:

  • HH – часы в 24-часовом формате
  • hh – часы в 12-часовом формате
  • mm – минуты
  • A – AM/PM

Управление состоянием и валидация

TimePicker интегрируется с состоянием React через useState:

const [timeValue, setTimeValue] = React.useState(dayjs('12:00', 'HH:mm'));

Для валидации можно использовать свойства minTime и maxTime или собственные функции проверки:

const handleChange = (newValue) => {
  if (newValue.isBefore(dayjs('08:00')) || newValue.isAfter(dayjs('20:00'))) {
    console.log('Выбрано недопустимое время');
    return;
  }
  setTimeValue(newValue);
};

Кастомизация отображения

TimePicker можно интегрировать с TextField для полной кастомизации интерфейса:

import TextField from '@mui/material/TextField';

<TimePicker
  label="Выберите время"
  value={timeValue}
  onCha nge={setTimeValue}
  renderInput={(params) => <TextField {...params} helperText="Выберите удобное время" />}
/>

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

Выбор времени в мобильном и десктопном режимах

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

  • На десктопах появляется попап с циферблатом и возможностью выбора стрелками.
  • На мобильных устройствах открывается full-screen диалог с удобным сенсорным вводом.

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

  • desktopModeMediaQuery – изменяет поведение в зависимости от медиазапроса.
  • DialogProps и PopperProps – позволяют тонко настраивать диалог и всплывающую подсказку.

Интеграция с формами

TimePicker легко интегрируется с библиотеками форм, такими как Formik или React Hook Form:

<Controller
  name="appointmentTime"
  control={control}
  render={({ field }) => (
    <TimePicker
      {...field}
      label="Время встречи"
      renderInput={(params) => <TextField {...params} />}
    />
  )}
/>

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

Советы по производительности

  • Использовать lazy loading для @mui/x-date-pickers, чтобы уменьшить вес бандла.
  • Не хранить сложные объекты даты/времени в состоянии без необходимости; хранить Day.js объекты или строки формата ISO.
  • Ограничивать количество перерисовок через React.memo при большом количестве TimePicker в интерфейсе.

TimePicker MUI сочетает гибкость, локализацию и удобство пользовательского интерфейса, обеспечивая надежный инструмент для выбора времени в современных веб-приложениях на React.

Оглавление