DatePicker

Поле ввода с маской дд.мм.гггг и попапом-календарём. Контролируемый и неконтролируемый режимы.

Базовый пример

import { DatePicker } from 'daterly';

<DatePicker label="Дата рождения" />;

Контролируемый

import { useState } from 'react'
import { DatePicker } from 'daterly'

const [date, setDate] = useState<Date | undefined>()

<DatePicker label="Дата" value={date} onChange={setDate} />

Если передан value (даже undefined) — компонент считает себя контролируемым. Используй defaultValue для неконтролируемого режима.

С выбором времени

<DatePicker label="Дата и время" showTime={{ format: 'HH:mm' }} />

// или с секундами
<DatePicker label="Тайм-штамп" showTime />

showTime={true} эквивалентно { format: 'HH:mm:ss' }.

Варианты TimePicker

Проп timePickerType управляет тем, как выглядит выбор времени в попапе. По умолчанию — 'input'.

'input' — компактные числовые поля рядом с кнопкой OK, в одну строку с календарём. Подходит, когда нужен быстрый ввод с клавиатуры.

<DatePicker showTime={{ format: 'HH:mm' }} timePickerType="input" />

'drum' — вертикальные «барабаны» под календарём, листать кликом или колесом. Подходит для тач-устройств и сценариев, где время важнее даты.

<DatePicker showTime={{ format: 'HH:mm' }} timePickerType="drum" />

В обоих режимах попап не закрывается автоматически — закрытие по кнопке OK.

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

<DatePicker
  label="Дата заезда"
  fromDate={new Date()} // не раньше сегодня
  toDate={new Date(2027, 11, 31)} // не позже 31.12.2027
/>

Ограничение действует и на календарь, и на ручной ввод: недопустимый день в календаре не кликается, а набранная или вставленная в поле дата вне диапазона помечается как невалидная — поле получает aria-invalid, onChange вызывается с undefined.

Блокировка произвольных дат

disabledDates блокирует любой набор дат, не обязательно непрерывный. Принимает то же, что disabled у react-day-picker: Date, массив, интервал, день недели, предикат.

<DatePicker label="Дата визита" disabledDates={[new Date(2027, 0, 1), new Date(2027, 0, 7)]} />

<DatePicker label="Только будни" disabledDates={{ dayOfWeek: [0, 6] }} />

<DatePicker label="Кроме января" disabledDates={{ from: new Date(2027, 0, 1), to: new Date(2027, 0, 31) }} />

<DatePicker label="Только чётные" disabledDates={(date) => date.getDate() % 2 !== 0} />

Работает вместе с fromDate / toDate — условия складываются. У DateRangePicker проп такой же, проверяются обе границы диапазона; диапазон, перешагивающий заблокированный день, при этом допустим.

Состояния

<DatePicker label="Ошибка" failed />
<DatePicker label="Загрузка" loading />
<DatePicker label="Отключено" disabled />

failed рисует красную рамку. loading заменяет иконку на спиннер и блокирует ввод. disabled блокирует и инпут, и попап.

Размеры

<DatePicker size="s" />
<DatePicker size="m" />  {/* по умолчанию */}
<DatePicker size="l" />

Подробнее — на странице Размеры.

Без календаря

Только инпут с маской, без попапа:

<DatePicker noCalendar label="Дата (без календаря)" />

Иконка

<DatePicker icon={false} />                    // спрятать
<DatePicker icon={<MyIcon />} />               // заменить
<DatePicker iconPosition="start" />            // слева вместо справа

Очистка

С clearable в поле появляется крестик, как только в нём есть значение. Клик по нему сбрасывает дату и вызывает onChange(undefined), фокус остаётся в инпуте.

<DatePicker clearable label="Дата" />

Крестик занимает место иконки справа. При iconPosition="start" календарная иконка остаётся слева, а крестик встаёт справа.

Сам крестик заменяется через clearIcon:

<DatePicker clearable clearIcon={<MyCloseIcon />} />

Проп читается только при clearable. Иконка вставляется внутрь кнопки — обработчик клика, aria-label и стили кнопки остаются на месте, менять их не нужно.

Кастомный триггер

Заменить весь инпут на собственный элемент:

<DatePicker
  customTrigger={(value, onClick) => (
    <button type="button" onClick={onClick}>
      {value || 'Выбрать дату'}
    </button>
  )}
/>

В этом случае ввода с маской нет — только клик по триггеру открывает попап.

Кастомный инпут

Сохранить логику маски, но заменить сам <input> на компонент из UI-кита:

import { Input } from 'antd';

<DatePicker
  renderInput={({ ref, className, ...props }) => (
    <Input ref={ref as any} {...props} />
  )}
/>;

Все обработчики (onChange, onKeyDown, onPaste, …) уже включены в props.

Локаль и формат

import { enUS, de } from 'date-fns/locale'

<DatePicker locale={enUS} dateFormat="MM/dd/yyyy" label="Birthday" />
<DatePicker locale={de}   dateFormat="dd.MM.yyyy" label="Geburtstag" />

См. отдельную страницу Локали и форматы.

Пропсы