DateTimePicker для даты и времени

DateTimePicker из библиотеки MUI (Material-UI) предоставляет компонент для выбора даты и времени в едином элементе управления. Он объединяет функциональность DatePicker и TimePicker, позволяя пользователю выбирать как конкретную дату, так и точное время в одном интерфейсе. Для его использования необходимо подключить пакет @mui/x-date-pickers/DateTimePicker и соответствующие адаптеры для работы с библиотеками управления датами, такими как date-fns, dayjs, luxon или moment.

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

import * as React from 'react';
import TextField from '@mui/material/TextField';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import dayjs from 'dayjs';

export default function BasicDateTimePicker() {
  const [value, setValue] = React.useState(dayjs());

  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DateTimePicker
        label="Выберите дату и время"
        value={value}
        onCha nge={(newValue) => setValue(newValue)}
        renderInput={(params) => <TextField {...params} />}
      />
    </LocalizationProvider>
  );
}

В этом примере ключевым моментом является обёртка LocalizationProvider, которая позволяет компоненту корректно обрабатывать локализацию и форматирование даты/времени.

Настройка формата отображения

DateTimePicker поддерживает различные форматы отображения даты и времени через свойство inputFormat. Оно определяет, как будет отображаться выбранное значение в текстовом поле. Примеры популярных форматов:

<DateTimePicker
  label="Дата и время"
  value={value}
  onCha nge={(newValue) => setValue(newValue)}
  inputFormat="DD.MM.YYYY HH:mm"
/>
  • DD.MM.YYYY HH:mm — 31.12.2026 14:30
  • YYYY/MM/DD hh:mm A — 2026/12/31 02:30 PM

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

<DateTimePicker
  label="Дата и время"
  value={value}
  onCha nge={(newValue) => setValue(newValue)}
  inputFormat="DD/MM/YYYY HH:mm"
  mask="__/__/____ __:__"
/>

Управление временем

DateTimePicker позволяет задавать ограничения на выбор времени:

  • minTime и maxTime — ограничивают выбор времени в пределах определённых часов и минут.
  • minutesStep — задаёт шаг изменения минут при прокрутке или ручном вводе.

Пример:

<DateTimePicker
  label="Рабочие часы"
  value={value}
  onCha nge={(newValue) => setValue(newValue)}
  minTime={dayjs().hour(9).minute(0)}
  maxTime={dayjs().hour(18).minute(0)}
  minutesStep={15}
/>

Здесь пользователь сможет выбрать время только в пределах с 09:00 до 18:00 с шагом 15 минут.

Ограничение выбора даты

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

  • minDate и maxDate — задают минимальную и максимальную допустимую дату.
  • disablePast — запрещает выбор прошлых дат.
  • disableFuture — запрещает выбор будущих дат.

Пример использования:

<DateTimePicker
  label="Срок события"
  value={value}
  onCha nge={(newValue) => setValue(newValue)}
  minDate={dayjs()}
  maxDate={dayjs().add(1, 'month')}
  disablePast
/>

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

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

DateTimePicker легко интегрируется с библиотеками управления формами, например, Formik или React Hook Form. Главное — использовать onChange для обновления состояния формы.

Пример с Formik:

import { useFormik } from 'formik';

const formik = useFormik({
  initialValues: { datetime: dayjs() },
  onSubmit: (values) => console.log(values),
});

<DateTimePicker
  label="Дата и время события"
  value={formik.values.datetime}
  onCha nge={(newValue) => formik.setFieldValue('datetime', newValue)}
  renderInput={(params) => <TextField {...params} />}
/>

Пользовательские стили и компоненты

MUI позволяет кастомизировать визуальное оформление DateTimePicker:

  • renderInput — можно полностью заменить текстовое поле на кастомный компонент.
  • sx — применять стили через систему MUI.
  • slotProps — детальная настройка элементов интерфейса, например кнопок или календаря.

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

<DateTimePicker
  label="Дата и время"
  value={value}
  onCha nge={(newValue) => setValue(newValue)}
  slotProps={{
    clearButton: {
      sx: { color: 'red', fontWeight: 'bold' },
      onClick: () => setValue(null),
    },
  }}
/>

Работа с локализацией

Для поддержки разных языков MUI использует объект локализации в LocalizationProvider. Пример для русского языка:

import { ruRU } from '@mui/x-date-pickers/locales';

<LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale="ru" localeText={ruRU.components.MuiLocalizationProvider.defaultProps.localeText}>
  <DateTimePicker
    label="Выберите дату и время"
    value={value}
    onCha nge={(newValue) => setValue(newValue)}
    renderInput={(params) => <TextField {...params} />}
  />
</LocalizationProvider>

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

Работа с событиями и обработка ошибок

DateTimePicker предоставляет события для контроля и валидации:

  • onAccept — вызывается при подтверждении выбора.
  • onError — позволяет отследить ошибки формата или недопустимой даты.
  • onClose — срабатывает при закрытии календаря или всплывающего окна выбора времени.

Пример:

<DateTimePicker
  label="Дата и время"
  value={value}
  onCha nge={(newValue) => setValue(newValue)}
  onAcc ept={(selected) => console.log('Выбрано:', selected)}
  onEr ror={(error) => console.error('Ошибка:', error)}
/>

Резюме ключевых возможностей

  • Совмещение выбора даты и времени в одном компоненте.
  • Поддержка локализации и кастомных форматов.
  • Гибкое ограничение диапазонов даты и времени.
  • Интеграция с формами и обработка событий.
  • Кастомизация визуального оформления через renderInput, sx и slotProps.

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

Оглавление