# DateTimeField: API ## Пропсы корня | Проп | Тип | По умолчанию | Обязательный | Описание | | --- | --- | --- | --- | --- | | `value` | `string` | — | Нет | Контролируемые дата и время в виде строки `YYYY-MM-DDTHH:mm` (с `:ss`, когда формат содержит секунды); `''`, пока в поле нет полного значения. | | `defaultValue` | `string` | `''` | Нет | Начальные дата и время для неконтролируемого использования, как у `value`. По умолчанию `''` — пустое поле. | | `onChangeValue` | `(value: string) => void` | — | Нет | Вызывается с датой и временем при их изменении и с `''`, когда текст очищен или не заполнен до конца. | | `dateFormat` | `string` | — | Да | Шаблон формата даты для маски ввода и разбора. Определяет порядок сегментов даты. Примеры: "dd.MM.yyyy"; "MM/dd/yyyy"; "yyyy-MM-dd" | | `timeFormat` | `'HH:mm' \| 'HH:mm:ss'` | `'HH:mm'` | Нет | Шаблон формата времени для маски ввода и разбора в нотации `dateFormat` (шаблоны дат Unicode). Определяет, какие сегменты времени доступны в поле. Примеры: "HH:mm" — часы и минуты. "HH:mm:ss" — часы, минуты и секунды. | | `timeStep` | `number` | `1` | Нет | Шаг ArrowUp / ArrowDown для минут или секунд под кареткой, с переходом по кругу в пределах диапазона сегмента. Как у нативного поля `datetime-local` со `step`, часы всегда меняются на один. `0` отключает шаг стрелками. Введённые значения к шагу не привязываются. | | `separator` | `string` | `', '` | Нет | Символ-разделитель сегментов (даты и времени) в поле. Примеры: ","; "-" | | `dateSeparator` | `string` | `'.'` | Нет | Символ-разделитель сегментов даты в поле. Примеры: ","; "-" | | `min` | `string` | — | Нет | Минимально допустимые дата и время в виде строки `YYYY-MM-DDTHH:mm[:ss]`. Даты раньше этого значения нельзя выбрать; при разборе ввода они ограничиваются или отклоняются. | | `max` | `string` | — | Нет | Максимально допустимые дата и время в виде строки `YYYY-MM-DDTHH:mm[:ss]`. Даты позже этого значения нельзя выбрать; при разборе ввода они ограничиваются или отклоняются. | | `disabledDates` | `CalendarDatesDisabled` | — | Нет | Правила отключения отдельных дат в календаре. Можно использовать, чтобы блокировать диапазоны, дни недели или собственные условия. | | `disabled` | `boolean` | — | Нет | Отключает поле. Запрещает ввод и взаимодействие и применяет визуальное отключённое состояние. | | `calendar` | `CalendarSystem` | `gregorianCalendar` | Нет | Календарная система, в которой дата вводится и выбирается. Значение остаётся строкой `YYYY-MM-DDTHH:mm[:ss]`. По умолчанию — григорианский календарь. | | `locale` | `string` | — | Нет | Локаль BCP 47 всплывающего календаря (названия месяцев и дней, первый день недели), например `de-DE`. Формат ввода по-прежнему задаётся `format`. По умолчанию — локаль среды выполнения, как у `Intl`. | | `size` | `TextFieldSize` | — | Нет | Визуальный размер текстового поля. Влияет на отступы, размер шрифта и общую высоту. 'sm': компактное поле; 'md': по умолчанию; 'lg': просторная раскладка | | `ref` | `Ref` | — | Нет | Ref, передаваемый на элемент-обёртку. Полезен для программного управления, фокуса или интеграции. | | `error` | `boolean` | — | Нет | Показывает поле ввода в состоянии ошибки. | Также принимает все атрибуты `
`. ## Дочерние части - `DateTimeFieldInput`: поле для ввода метки времени с клавиатуры. - `DateTimeFieldTriggerIconButton`: необязательная кнопка-триггер календаря. - `DateTimeFieldCalendar`: содержимое календаря, синхронизированное со значением поля. ### `DateTimeFieldInput` | Проп | Тип | По умолчанию | Обязательный | Описание | | --- | --- | --- | --- | --- | | `ref` | `Ref` | — | Нет | Ref, передаваемый на нижележащий нативный элемент ``. | Также принимает все атрибуты ``. ### `DateTimeFieldCalendar` | Проп | Тип | По умолчанию | Обязательный | Описание | | --- | --- | --- | --- | --- | | `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` календарь использует обычные интервалы. | Также принимает все атрибуты `
`. ### `DateTimeFieldTriggerIconButton` | Проп | Тип | По умолчанию | Обязательный | Описание | | --- | --- | --- | --- | --- | | `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, передаваемый на нативный элемент `