DatePicker компонент

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

Установка и подключение

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

npm install @mui/x-date-pickers

И подключить стили MUI, если они ещё не подключены:

import '@mui/material/styles';
import '@mui/x-date-pickers/DatePicker';

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

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

LocalizationProvider обеспечивает поддержку локализации и правильное форматирование дат. В качестве адаптера обычно используется AdapterDateFns, но доступны также AdapterMoment и другие.

Основной синтаксис

Компонент DatePicker оборачивается в LocalizationProvider и может быть использован так:

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

  return (
    
       setValue(newValue)}
        renderInput={(params) => }
      />
    
  );
}

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

  • value — текущее значение даты.
  • onChange — обработчик изменений даты.
  • renderInput — функция, которая возвращает текстовое поле, в котором отображается выбранная дата.

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

DatePicker поддерживает настройку формата даты и локализации через свойства format и locale адаптера:

import { ru } from 'date-fns/locale';

 setValue(newValue)}
  inputFormat="dd.MM.yyyy"
  renderInput={(params) => }
/>
  • inputFormat позволяет задать формат отображения даты.
  • Для русской локали используется locale={ru} при инициализации AdapterDateFns.

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

Можно ограничить диапазон дат с помощью свойств minDate и maxDate:

 setValue(newValue)}
  minDate={new Date('2023-01-01')}
  maxDate={new Date('2023-12-31')}
  renderInput={(params) => }
/>

Также доступно свойство disablePast и disableFuture для запрета выбора дат до текущего момента или после него.

Выбор диапазона дат

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

import { DateRangePicker } from '@mui/x-date-pickers-pro/DateRangePicker';

 setDateRange(newRange)}
  renderInput={(startProps, endProps) => (
    <>
      
      
    
  )}
/>

Диапазон представлен массивом [startDate, endDate]. Компонент автоматически обеспечивает выбор последовательных дат и проверку корректности диапазона.

Дополнительные свойства

  • disableHighlightToday — отключает подсветку текущей даты.
  • showDaysOutsideCurrentMonth — отображение дней соседних месяцев.
  • openTo — начальный вид календаря: day, month или year.
  • views — позволяет ограничить доступные уровни выбора: например, ["year", "month"] для выбора только месяца и года.

Пример с ограниченными уровнями выбора:

 setValue(newValue)}
  renderInput={(params) => }
/>

Стилизация и кастомизация

MUI позволяет настраивать внешний вид DatePicker через систему sx или классы:

 setValue(newValue)}
  renderInput={(params) => (
    
  )}
/>

Можно также использовать components и componentsProps для замены частей UI, например, иконки календаря или стрелок навигации.

Обработка ошибок и валидация

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

 setValue(newValue)}
  onEr ror={(error) => console.log('Ошибка выбора даты:', error)}
  renderInput={(params) => }
/>

Список возможных ошибок включает:

  • invalidDate — некорректная дата.
  • minDate — дата меньше минимальной.
  • maxDate — дата больше максимальной.
  • disablePast / disableFuture — выбор запрещённой даты.

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

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

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

const { control, handleSubmit } = useForm();

 (
     }
    />
  )}
/>

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

Оглавление