# DateField: API ## Пропсы корня | Проп | Тип | По умолчанию | Обязательный | Описание | | --- | --- | --- | --- | --- | | `value` | `string` | — | Нет | Контролируемая дата в виде строки `YYYY-MM-DD`; `''`, пока в поле нет полной даты. | | `defaultValue` | `string` | `''` | Нет | Начальная дата для неконтролируемого использования в виде строки `YYYY-MM-DD`. По умолчанию `''` — пустое поле. | | `onChangeValue` | `(value: string) => void` | — | Нет | Вызывается с датой `YYYY-MM-DD` при её изменении и с `''`, когда текст очищен или не заполнен до конца. | | `format` | `string` | — | Да | Шаблон формата даты для маски ввода и разбора. Определяет порядок сегментов даты. Примеры: "dd.MM.yyyy"; "MM/dd/yyyy"; "yyyy-MM-dd" | | `separator` | `string` | — | Да | Символ-разделитель сегментов даты в поле. Примеры: "."; "/"; "-" | | `min` | `string` | — | Нет | Минимально допустимая дата в виде строки `YYYY-MM-DD`. Даты раньше этого значения нельзя выбрать; при разборе ввода они ограничиваются или отклоняются. | | `max` | `string` | — | Нет | Максимально допустимая дата в виде строки `YYYY-MM-DD`. Даты позже этого значения нельзя выбрать; при разборе ввода они ограничиваются или отклоняются. | | `disabledDates` | `CalendarDatesDisabled` | — | Нет | Правила отключения отдельных дат в календаре. Можно использовать, чтобы блокировать диапазоны, дни недели или собственные условия. | | `disabled` | `boolean` | — | Нет | Отключает поле. Запрещает ввод и взаимодействие и применяет визуальное отключённое состояние. | | `calendar` | `CalendarSystem` | `gregorianCalendar` | Нет | Календарная система, в которой дата вводится и выбирается. Значение остаётся днём в формате `YYYY-MM-DD`. По умолчанию — григорианский календарь. | | `locale` | `string` | — | Нет | Локаль BCP 47 всплывающего календаря (названия месяцев и дней, первый день недели), например `de-DE`. Формат ввода по-прежнему задаётся `format`. По умолчанию — локаль среды выполнения, как у `Intl`. | | `size` | `TextFieldSize` | — | Нет | Визуальный размер текстового поля. Влияет на отступы, размер шрифта и общую высоту. 'sm': компактное поле; 'md': по умолчанию; 'lg': просторная раскладка | | `ref` | `Ref` | — | Нет | Ref, передаваемый на элемент-обёртку. Полезен для программного управления, фокуса или интеграции. | | `error` | `boolean` | — | Нет | Показывает поле ввода в состоянии ошибки. | Также принимает все атрибуты `
`. ## Дочерние части - `DateFieldInput`: поверхность для ввода. - `DateFieldTriggerIconButton`: необязательная кнопка-триггер календаря. - `DateFieldCalendar`: содержимое календаря, синхронизированное со значением поля. ### `DateFieldInput` | Проп | Тип | По умолчанию | Обязательный | Описание | | --- | --- | --- | --- | --- | | `ref` | `Ref` | — | Нет | Ref, передаваемый на нижележащий нативный элемент ``. | Также принимает все атрибуты ``. ### `DateFieldCalendar` | Проп | Тип | По умолчанию | Обязательный | Описание | | --- | --- | --- | --- | --- | | `max` | `string` | — | Нет | Самая поздняя доступная для выбора дата в виде строки `YYYY-MM-DD`. Месяцы и годы после этой даты становятся недоступны. Пикеры дней, месяцев и годов используют её, чтобы отключать или ограничивать навигацию. | | `min` | `string` | — | Нет | Самая ранняя доступная для выбора дата в виде строки `YYYY-MM-DD`. Месяцы и годы до этой даты становятся недоступны. Все пикеры учитывают это ограничение при вычислении активных диапазонов. | | `selection` | `"single"` | — | Нет | Режим выбора. Определяет форму `value`, все даты — строки `YYYY-MM-DD`: 'single' — строка, `''`, когда ничего не выбрано; 'multiple' — массив строк; 'range' — кортеж `[start, end]`, где `start` не позже `end`, а `''` обозначает незаданную границу. По умолчанию: `'single'` | | `view` | `CalendarView` | — | Нет | Контролируемый видимый вид: 'day' — дни видимого месяца (`CalendarDays`); 'month' — месяцы видимого года (`CalendarMonths`); 'year' — страницы годов (`CalendarYears`) | | `value` | `string` | — | Нет | Контролируемое значение выбора, форма которого зависит от режима `selection`. Некорректные или несуществующие даты считаются невыбранными. | | `defaultValue` | `string` | — | Нет | Неконтролируемое начальное значение выбора, форма которого зависит от режима `selection`. | | `defaultView` | `CalendarView` | — | Нет | Начальный вид для неконтролируемого использования. По умолчанию: `'day'` | | `disabled` | `boolean` | — | Нет | Отключает весь календарь: ни одну дату нельзя выбрать, навигация выключена. | | `disabledDates` | `CalendarDatesDisabled` | — | Нет | Даты, которые нельзя выбрать, в виде строк `YYYY-MM-DD`: одна дата; массив дат; предикат `(date: string) => boolean` | | `onChangeValue` | `(value: CalendarValue) => void` | — | Нет | Вызывается, когда пользователь меняет выбор. Форма значения зависит от режима `selection`. | | `onChangeView` | `(view: CalendarView) => void` | — | Нет | Вызывается при изменении видимого вида. | | `month` | `string` | — | Нет | Контролируемый видимый месяц — строка `YYYY-MM-DD` любого дня этого месяца. | | `defaultMonth` | `string` | — | Нет | Начальный видимый месяц для неконтролируемого использования — строка `YYYY-MM-DD` любого дня этого месяца. По умолчанию: месяц выбранной даты, иначе текущий месяц | | `onChangeMonth` | `(month: string) => void` | — | Нет | Вызывается с первым днём видимого месяца в виде строки `YYYY-MM-DD`, когда видимый месяц меняется (например, при прокрутке или через пикеры месяца и года). Это событие отражает навигацию по виду, а не выбор. | | `calendar` | `CalendarSystem` | — | Нет | Календарная система, в которой показывается календарь. Значения остаются днями в формате `YYYY-MM-DD`. По умолчанию — григорианский календарь. | | `locale` | `string` | — | Нет | Локаль BCP 47 для названий месяцев и дней и первого дня недели, например `de-DE`. Применяется ко всем частям календаря и задаёт `lang` на корне. По умолчанию — локаль среды выполнения, как у `Intl`. | | `size` | `CalendarBaseSize` | — | Нет | Общая шкала размера календаря. Через `CalendarBaseContext` влияет на вложенные элементы управления: кнопки навигации, триггеры пикеров и подписи дней недели. | | `variant` | `CalendarBaseVariant` | — | Нет | Визуальный вариант календаря. Передаётся через `CalendarBaseContext` и используется вложенными элементами управления (кнопками, подписями и т. д.) для единообразной стилизации. | | `compact` | `boolean` | — | Нет | Флаг плотности для более компактных раскладок. При `true` корневой элемент получает `data-compact="true"`, чтобы стили могли уменьшить отступы, промежутки и высоту элементов управления для более плотного календаря. При `false` или `undefined` календарь использует обычные интервалы. | Также принимает все атрибуты `
`. ### `DateFieldTriggerIconButton` | Проп | Тип | По умолчанию | Обязательный | Описание | | --- | --- | --- | --- | --- | | `size` | `IconButtonSize` | — | Нет | Размер контейнера кнопки. Управляет отступами и общей кликабельной областью. | | `asChild` | `boolean` | — | Нет | Если true, рендерит кнопку как дочерний компонент через `Slot` (например, из Radix UI). Включает полиморфный рендер — полезно, чтобы кнопка работала как ссылка или собственный тег. | | `variant` | `ButtonBaseVariant` | — | Нет | Определяет визуальный стиль кнопки: цветовую схему и акцент. | | `appearance` | `ButtonBaseAppearance` | — | Нет | Настраивает структурный внешний вид кнопки (фон, рамка и т. д.). | | `disabled` | `boolean` | — | Нет | Отключает кнопку при true. Запрещает взаимодействие и применяет визуальное отключённое состояние. Не применяется с `asChild`: отключённым состоянием владеет дочерний элемент, например через `aria-disabled` или ссылку без `href`. | | `className` | `string` | — | Нет | Необязательный собственный CSS-класс для элемента кнопки. Полезен для переопределений дизайн-системы или локальных стилей. | | `children` | `ReactNode` | — | Нет | Содержимое кнопки — текст, иконка или любой React-узел. | | `ref` | `Ref` | — | Нет | Ref, передаваемый на нативный элемент `