DatePicker и RangePicker

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

Импорт и базовое использование

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

import { DatePicker } from 'antd';

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

<DatePicker />

При этом на странице появится стандартный календарь, где можно выбрать дату. Выбранное значение возвращается как объект Moment из библиотеки moment.js (или dayjs, если настроена замена).

Настройка формата даты

Для изменения формата отображения используется проп format:

<DatePicker format="DD.MM.YYYY" />

Поддерживаются следующие шаблоны:

  • YYYY – год в 4 цифры
  • MM – месяц с ведущим нулем
  • DD – день с ведущим нулем
  • HH:mm:ss – для отображения времени, если включён TimePicker

Управление состоянием выбранной даты

DatePicker поддерживает контролируемый режим с использованием состояния React:

const [date, setDate] = useState(null);

<DatePicker
  value={date}
  onCha nge={(value) => setDate(value)}
/>

Здесь value задаёт текущее значение, а onChange получает новый объект даты при выборе пользователем.

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

Для ограничения диапазона выбора используются свойства disabledDate и disabledTime:

<DatePicker
  disabledDate={(current) => current && current < moment().startOf('day')}
/>

В данном примере запрещено выбирать даты до сегодняшнего дня.

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

Компонент легко интегрируется с Form.Item из Ant Design:

<Form.Item
  name="birthday"
  label="Дата рождения"
  rules={[{ required: true, message: 'Пожалуйста, выберите дату!' }]}
>
  <DatePicker />
</Form.Item>

При этом валидация и работа с формой происходят автоматически.

Компонент RangePicker

RangePicker — это расширение DatePicker, позволяющее выбирать диапазон дат. Он полезен для фильтров, отчётов и планирования событий.

Импорт и базовое использование

import { DatePicker } from 'antd';
const { RangePicker } = DatePicker;

<RangePicker />

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

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

Для изменения формата и символа между датами:

<RangePicker
  format="DD/MM/YYYY"
  separator="по"
/>

Вывод будет, например: 01/03/2026 по 14/03/2026.

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

Для ограничения выбора используется проп disabledDate:

<RangePicker
  disabledDate={(current) => current && current > moment().endOf('month')}
/>

Можно комбинировать условия, запрещая выбор дат до определённого момента и после текущего месяца.

Включение выбора времени

RangePicker поддерживает выбор времени с помощью showTime:

<RangePicker
  showTime={{ format: 'HH:mm' }}
  format="DD.MM.YYYY HH:mm"
/>

В этом режиме можно выбирать не только дату, но и точное время для каждой точки диапазона.

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

const [range, setRange] = useState([]);

<RangePicker
  value={range}
  onCha nge={(dates) => setRange(dates)}
/>

Здесь dates — массив из двух объектов Moment, представляющих начальную и конечную даты.

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

<Form.Item
  name="period"
  label="Период"
  rules={[{ required: true, message: 'Выберите диапазон дат!' }]}
>
  <RangePicker />
</Form.Item>

Автоматическая валидация и обработка формы упрощает работу с RangePicker в сложных интерфейсах.

Кастомизация и дополнительные возможности

  1. Локализация Через locale можно изменить язык календаря, формат отображения дней недели и месяцев:
import ruRU from 'antd/locale/ru_RU';

<DatePicker locale={ruRU} />
  1. Предустановленные диапазоны Для RangePicker можно задать быстрые диапазоны через ranges:
<RangePicker
  ranges={{
    'Сегодня': [moment(), moment()],
    'Последние 7 дней': [moment().subtract(6, 'days'), moment()]
  }}
/>

  1. Фильтрация дат С помощью disabledDate и disabledTime можно гибко блокировать отдельные дни и часы.

  2. Стилизация Все элементы DatePicker можно стилизовать через CSS-классы Ant Design или style проп:

<DatePicker style={{ width: 250, borderRadius: 4 }} />

  1. События Помимо onChange, доступны события:

    • onOpenChange – открытие/закрытие календаря
    • onPanelChange – изменение месяца, года или десятилетия
    • onOk – подтверждение даты при включённом TimePicker

Рекомендации по использованию

  • Для форм лучше использовать контролируемые компоненты с состоянием React или интеграцией через Form.Item.
  • Ограничения выбора (disabledDate, disabledTime) повышают UX, предотвращая ошибки пользователя.
  • При выборе диапазона с временем обязательно учитывать порядок дат, чтобы избежать логических ошибок.
  • Использовать локализацию для соответствия интерфейса региону пользователя.
  • Предустановленные диапазоны (ranges) ускоряют работу с повторяющимися выборками дат.

DatePicker и RangePicker обеспечивают мощный набор возможностей для работы с датами и временем, позволяя создавать как простые формы, так и сложные фильтры и планировщики.

Оглавление