DatePicker

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

previewDatePicker

Дата

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

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 для неконтролируемого режима.

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

previewЖивой компонент · HH:mm

Дата и время

<DatePicker label="Дата и время" showTime={{ format: 'HH:mm' }} />
 
// или с секундами
<DatePicker label="Тайм-штамп" showTime />

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

Варианты TimePicker

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

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

previewЖивой компонент · HH:mm · timePicker=input

TimePicker: input

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

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

previewЖивой компонент · HH:mm · timePicker=drum

TimePicker: drum

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

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

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

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

Состояния

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

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

Размеры

previewЖивой компонент · size=s

Small

previewЖивой компонент · size=l

Large

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

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

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

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

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

Иконка

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

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

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

<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.

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

previewЖивой компонент · locale=en-US · format=MM/dd/yyyy

Birthday

previewЖивой компонент · locale=de · format=dd.MM.yyyy

Geburtstag

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" />

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

Пропсы

Prop	Тип	По умолчанию	Описание
`value`	`Date`	—	Контролируемое значение
`defaultValue`	`Date`	—	Неконтролируемое начальное значение
`onChange`	`(date: Date \| undefined) => void`	—	Колбэк при изменении
`label`	`string`	—	Плавающий лейбл
`placeholder`	`string`	из формата	Плейсхолдер
`locale`	`Locale` (`date-fns`)	`ru`	Локаль
`dateFormat`	`string`	`'dd.MM.yyyy'`	Формат даты
`fromDate`	`Date`	—	Минимально допустимая
`toDate`	`Date`	—	Максимально допустимая
`showTime`	`boolean \| { format: 'HH:mm' \| 'HH:mm:ss' }`	—	Включить выбор времени
`timePickerType`	`'input' \| 'drum'`	`'input'`	Внешний вид выбора времени
`noCalendar`	`boolean`	`false`	Только инпут, без попапа
`size`	`'s' \| 'm' \| 'l'`	`'m'`	Размер
`disabled`	`boolean`	`false`	Отключено
`failed`	`boolean`	`false`	Состояние ошибки
`loading`	`boolean`	`false`	Загрузка
`icon`	`ReactNode \| false`	календарь	Иконка
`iconPosition`	`'start' \| 'end'`	`'end'`	Позиция иконки
`renderInput`	`(props) => ReactNode`	—	Заменить `<input>`
`customTrigger`	`(value, onClick) => ReactNode`	—	Заменить весь триггер
`className`	`string`	—	CSS-класс на корне

Установка DateRangePicker