Пропсы корня
| Проп | Тип | По умолчанию |
|---|---|---|
value | [start: string, end: string] | — |
Контролируемый диапазон в виде кортежа [start, end] из строк YYYY-MM-DD. Граница равна '', пока она не заполнена; без начала диапазон пуст. | ||
defaultValue | [start: string, end: string] | ['', ''] |
Начальный диапазон для неконтролируемого использования, как у value. По умолчанию ['', ''] — пустое поле. | ||
onChangeValue | (value: [start: string, end: string]) => void | — |
| Вызывается с диапазоном при его изменении. | ||
formatобязательный | string | — |
| Шаблон формата даты для маски ввода и разбора. Определяет порядок сегментов даты. Примеры: "dd.MM.yyyy"; "MM/dd/yyyy"; "yyyy-MM-dd" | ||
separatorобязательный | string | — |
| Символ-разделитель сегментов даты в поле. Примеры: "."; "/"; "-" | ||
rangeSeparator | string | ' – ' |
Разделитель между начальной и конечной датами в поле диапазона, по умолчанию — короткое тире между неразрывными пробелами ('\u00A0–\u00A0'). Определяет, как две даты визуально и логически разделяются при вводе или отображении диапазона дат. Примеры: " – " → "01.01.2024 – 31.01.2024"; " - " → "01.01.2024 - 31.01.2024"; " to " → "01.01.2024 to 31.01.2024". Если не задан, используется короткое тире между неразрывными пробелами (U+00A0), чтобы диапазон не переносился на разделителе. | ||
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<HTMLDivElement> | — |
| Ref, передаваемый на элемент-обёртку. Полезен для программного управления, фокуса или интеграции. | ||
error | boolean | — |
| Показывает поле ввода в состоянии ошибки. | ||
Также принимает все атрибуты <div>.
Дочерние части
DateRangeFieldInput: поверхность ввода дат начала и окончания.DateRangeFieldTriggerIconButton: необязательная кнопка-триггер календаря.DateRangeFieldCalendar: содержимое календаря, синхронизированное с выбранным диапазоном.
DateRangeFieldInput
| Проп | Тип | По умолчанию |
|---|---|---|
ref | Ref<HTMLInputElement> | — |
Ref, передаваемый на нижележащий нативный элемент <input>. | ||
Также принимает все атрибуты <input>.
DateRangeFieldCalendar
| Проп | Тип | По умолчанию |
|---|---|---|
max | string | — |
Самая поздняя доступная для выбора дата в виде строки YYYY-MM-DD. Месяцы и годы после этой даты становятся недоступны. Пикеры дней, месяцев и годов используют её, чтобы отключать или ограничивать навигацию. | ||
min | string | — |
Самая ранняя доступная для выбора дата в виде строки YYYY-MM-DD. Месяцы и годы до этой даты становятся недоступны. Все пикеры учитывают это ограничение при вычислении активных диапазонов. | ||
selection | "range" | — |
Режим выбора. Определяет форму value, все даты — строки YYYY-MM-DD: 'single' — строка, '', когда ничего не выбрано; 'multiple' — массив строк; 'range' — кортеж [start, end], где start не позже end, а '' обозначает незаданную границу. По умолчанию: 'single' | ||
view | CalendarView | — |
Контролируемый видимый вид: 'day' — дни видимого месяца (CalendarDays); 'month' — месяцы видимого года (CalendarMonths); 'year' — страницы годов (CalendarYears) | ||
value | [start: string, end: string] | — |
Контролируемое значение выбора, форма которого зависит от режима selection. Некорректные или несуществующие даты считаются невыбранными. | ||
defaultValue | [start: string, end: string] | — |
Неконтролируемое начальное значение выбора, форма которого зависит от режима selection. | ||
defaultView | CalendarView | — |
Начальный вид для неконтролируемого использования. По умолчанию: 'day' | ||
disabled | boolean | — |
| Отключает весь календарь: ни одну дату нельзя выбрать, навигация выключена. | ||
disabledDates | CalendarDatesDisabled | — |
Даты, которые нельзя выбрать, в виде строк YYYY-MM-DD: одна дата; массив дат; предикат (date: string) => boolean | ||
onChangeValue | (value: CalendarValue<S>) => 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 календарь использует обычные интервалы. | ||
Также принимает все атрибуты <div>.
DateRangeFieldTriggerIconButton
| Проп | Тип | По умолчанию |
|---|---|---|
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<HTMLButtonElement> | — |
Ref, передаваемый на нативный элемент <button>. Даёт прямой доступ к DOM для управления фокусом или измерений. | ||
Также принимает все атрибуты <button>.
Типы
DateRangeFieldPropsDateRangeFieldInputPropsDateRangeFieldTriggerIconButtonPropsDateRangeFieldCalendarProps
Модель состояния
- Корень владеет связанной парой дат, а не двумя несвязанными значениями.
- Частичный ввод — обычное дело при редактировании, и его нужно обрабатывать явно.
- Корень принимает
value,defaultValueиonChangeValueкак кортеж[start, end]из днейYYYY-MM-DD;DateRangeFieldInputпоказывает его в форматеformatи по-прежнему вызывает собственныеonChangeиonInput. Пока дата начала пуста или неполна, диапазон равен['', '']; пока неполна только дата окончания, в диапазоне есть только начало. Сброс формы восстанавливаетdefaultValue, если поле не контролируемое. - При изменении
minилиmaxобе введённые даты снова ограничиваются так же, как при вводе, с вызовомinput. rangeSeparatorвлияет на видимую композицию и ожидания при разборе.- Пропсы ограничений должны соответствовать реальным правилам формы и отчётности.