DateRangePicker для диапазонов

DateRangePicker — это компонент библиотеки MUI (Material-UI), предназначенный для выбора диапазона дат. Он строится поверх @mui/x-date-pickers и обеспечивает удобный интерфейс для выбора начала и конца периода. Основная задача компонента — предоставлять пользователю визуальный календарь с возможностью выбора двух дат и интеграцию с формами.

Установка и импорт

Для работы с DateRangePicker необходимо установить пакет @mui/x-date-pickers-pro (для PRO-версии) или @mui/x-date-pickers (для стандартного использования):

npm install @mui/x-date-pickers @mui/material @mui/lab dayjs

Импорт компонентов:

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

LocalizationProvider необходим для корректного отображения календаря и обработки формата дат. AdapterDayjs отвечает за работу с объектами Dayjs.

Основная структура компонента

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

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

  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DateRangePicker
        startText="Начало периода"
        endText="Конец периода"
        value={value}
        onCha nge={(newValue) => setValue(newValue)}
        renderInput={(startProps, endProps) => (
          <React.Fragment>
            <TextField {...startProps} />
            <Box sx={{ mx: 2 }}> до </Box>
            <TextField {...endProps} />
          </React.Fragment>
        )}
      />
    </LocalizationProvider>
  );
}

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

value хранит массив из двух элементов: [начало, конец].
onChange вызывается при любом изменении выбранного диапазона.
renderInput позволяет кастомизировать поля ввода, вставлять между ними текст или иконки.
startText и endText задают подписи для полей ввода.

Настройка формата дат и локализации

DateRangePicker поддерживает локализацию и различные форматы отображения дат через адаптеры:

<LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale="ru">
  <DateRangePicker
    value={value}
    onCha nge={(newValue) => setValue(newValue)}
    inputFormat="DD.MM.YYYY"
    renderInput={(startProps, endProps) => (
      <>
        <TextField {...startProps} />
        <Box sx={{ mx: 2 }}>–</Box>
        <TextField {...endProps} />
      </>
    )}
  />
</LocalizationProvider>

inputFormat позволяет задать формат отображения даты.
adapterLocale указывает язык календаря. Для Dayjs необходимо подключить соответствующую локаль (import 'dayjs/locale/ru';).

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

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

<DateRangePicker
  minDate={dayjs().subtract(1, 'year')}
  maxDate={dayjs().add(1, 'year')}
  value={value}
  onCha nge={(newValue) => setValue(newValue)}
/>

minDate ограничивает минимальную дату, доступную для выбора.
maxDate ограничивает максимальную дату.

Для динамических ограничений можно использовать функцию внутри shouldDisableDate:

<DateRangePicker
  shouldDisableDate={(date) => date.day() === 0 || date.day() === 6} // отключает выходные
/>

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

DateRangePicker интегрируется с системой тем MUI. Можно изменить цвета, размеры и шрифты через sx или глобальную тему:

<DateRangePicker
  sx={{
    '& .MuiInputBase-root': {
      borderRadius: 2,
      bgcolor: '#f0f0f0'
    },
    '& .MuiPickersDay-root': {
      fontWeight: 'bold'
    }
  }}
/>

sx позволяет гибко настраивать стили конкретного компонента.
Селекторы внутри sx воздействуют на внутренние элементы календаря и полей ввода.

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

DateRangePicker удобно использовать с библиотеками управления формами, такими как react-hook-form:

import { Controller, useForm } from 'react-hook-form';

const { control, handleSubmit } = useForm({
  defaultValues: {
    period: [null, null],
  },
});

<Controller
  name="period"
  control={control}
  render={({ field }) => (
    <DateRangePicker
      value={field.value}
      onCha nge={field.onChange}
      renderInput={(startProps, endProps) => (
        <>
          <TextField {...startProps} />
          <Box sx={{ mx: 1 }}>–</Box>
          <TextField {...endProps} />
        </>
      )}
    />
  )}
/>

Controller обеспечивает двустороннюю привязку значения компонента к форме.
field.onChange синхронизирует выбранный диапазон с формой.

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

Предустановленные диапазоны: можно создавать быстрые выборки вроде «Сегодня», «Прошлая неделя» или «Этот месяц».
События календаря: доступны onMonthChange и onYearChange для отслеживания навигации.
Валидация: поддерживаются кастомные функции в shouldDisableDate и disablePast/disableFuture.