DatePicker

DatePicker — поле даты: текст по маске и кнопка справа, которая открывает Calendar в DropdownPanel. Сам календарь тот же, что и у отдельного Calendar, — листание, переход к месяцам и годам, границы min / max работают так же.

Дату можно набрать с клавиатуры в виде ДД.ММ.ГГГГ: текст разбирается по Enter и при уходе из поля. Невалидная строка или дата за границами откатывается к текущему значению, стёртая — даёт null. Выбор дня в календаре закрывает панель.

Значение — один Date или null, контролируемая модель: пара value / onValueChange. Оболочка — как у Input: label, error, iconLeft и ступень size из общего словаря визуальных пропсов.

Использует: ButtonIcon, Calendar, Field, Input, DropdownPanel

Срок

Срок: 17.07.2026

Анатомия

DatePicker

Field.Root (обёртка)

Label (label)

Control (обёртка)

IconLeft (iconLeft)

input (текст по маске)

DropdownPanel (кнопка календаря)

Calendar

Input type=time (withTime)

Error (error, при invalid)

Примеры

С временем

withTime добавляет под календарь поле времени: оно меняет часы и минуты выбранной даты, а маска текста становится ДД.ММ.ГГГГ ЧЧ:ММ. Выбор дня сохраняет уже заданное время (у пустого значения — 00:00) и оставляет панель открытой, чтобы следом поправить время. Пока дата не выбрана, поле времени погашено.

Встреча

Начало: 17.07.2026, 14:30:00

Секунды

withSeconds вместе с withTime добавляет секунды и в поле времени, и в маску текста. Без него секунды значения обнуляются при любой правке.

Отметка

Границы выбора

min и max ограничивают доступные дни: в календаре дни за границами тускнеют, а набранная вне их дата откатывается. Граница — по дням, время не учитывается.

День спринта

Ошибка

Непустой error помечает поле как invalid и рисует текст ошибки под ним — как у Input.

Дата рождения

Укажите дату

Размер

Ступень size задаёт высоту поля и кегль — шкала та же, что у Input и кнопок. Календарь в панели остаётся базового размера.

API

Prop	Type	Default
`value`* Выбранный момент (контролируемая модель); null — пусто	`Date \| null`	-
`onValueChange`* Вызывается при выборе в календаре, правке времени и подтверждении набранного текста (Enter, уход фокуса); стёртый текст — null	`(value: Date \| null) => void`	-
`withTime` Поле времени под календарём; текст в поле — «ДД.ММ.ГГГГ ЧЧ:ММ»	`boolean`	`false`
`withSeconds` Секунды в поле времени и в тексте — только вместе с withTime	`boolean`	`false`
`min` Минимальная доступная дата — всё, что раньше, не выбирается	`Date`	-
`max` Максимальная доступная дата — всё, что позже, не выбирается	`Date`	-
`placeholder` Плейсхолдер поля; по умолчанию — маска формата («ДД.ММ.ГГГГ»)	`string`	-
`autoFocus` Фокус в поле при монтировании	`boolean`	-
`open` Открытость календаря (контролируемая); без пропа — своя	`boolean`	-
`onOpenChange` Вызывается на любое открытие и закрытие календаря — кнопкой, выбором дня, Esc и кликом вне панели	`(open: boolean) => void`	-
`size` Размер компонента	`Size`	-
`radius` Скругление углов: circle — «таблетка»	`Radius`	-
`label` Текст лейбла над контролом	`ReactNode`	-
`disabled` Отключает поле: контрол внутри становится недоступен	`FieldArkRootProps["disabled"]`	-
`readOnly` Значение видно, но изменить его нельзя	`FieldArkRootProps["readOnly"]`	-
`invalid` Помечает поле ошибочным: контрол получает `data-invalid`, и только в этом состоянии рендерится Field.Error	`FieldArkRootProps["invalid"]`	-
`required` Помечает поле обязательным	`FieldArkRootProps["required"]`	-
`error` Текст ошибки под контролом; при наличии поле помечается как invalid	`ReactNode`	-
`iconLeft` Декоративная иконка слева внутри контрола	`Icon`	-

Наследуется от Pick<VisualProps, K>, Omit<FieldShellProps, "iconRight">