DatePicker
Быстрый старт
- Uncontrolled
- Controlled
Сигнатура вызова onCommitDate c 6 аргументами - deprecated
export type OnCommitDateCallback = (
value: Date | string,
error?: boolean,
success?: boolean,
dateInfo?: DateInfo,
originalDate?: Date,
isoDate?: string,
) => void;
Используйте обновленную сигнатуру с 2мя аргументами
export type FormattedDateValues = {
/**
* Статус ошибки валидации
*/
error?: boolean;
/**
* Статус успешной валидации
*/
success?: boolean;
/**
* Информация о дате (для кварталов и т.д.)
*/
dateInfo?: DateInfo;
/**
* Дата как экземпляр Date
*/
originalDate?: Date;
/**
* Дата в формате ISO
*/
isoDate?: string;
};
export type OnCommitDateCallback = (value: Date | string, formattedValues: FormattedDateValues) => void;
Управление внешним видом
Внешний вид компонента задаётся с помощью свойства appearance. appearance="viewMode" — режим просмотра.
Размер DatePicker задаётся с помощью свойства size.
Выравнивание переключателя периода
Свойство periodSelectorAlign управляет выравниванием переключателя периода в календаре DatePicker: start (по умолчанию) — слева, center — по центру между стрелками навигации.
- Center
- Start
Формат даты
Формат даты задается с помощью свойства format.
| Обозначение | Отображение | Описание |
|---|---|---|
| DD | 01-31 | Дни месяца, 2 цифры |
| D | 1-31 | Дни месяца |
| MMMM | January...December / январь...декабрь | Месяц года, полное название |
| MMM | Jan...Dec / янв.-дек. | Месяц года, сокращенное название |
| MM | 01-12 | Месяц года, 2 цифры |
| M | 1-12 | Месяц года |
| YYYY | 2024 | Год из 4 цифр |
| YY | 24 | Год из 2 цифр |
| Q | 1-4 | Квартал |
При выборе даты в календаре или вводе даты через поле ввода, дата будет приводиться к заданному формату.
Свойство maskWithFormat позволяет маскировать ввод, кроме случаев когда месяц имеет формат полной записи MMMM:
Пользовательские названия кварталов
Названия кварталов задаются с помощью свойства quarterNames. По умолчанию используются значения Q1, Q2, Q3, Q4.
Язык даты
Язык даты задается с помощью свойства lang.
| Обозначение | Отображение | Описание |
|---|---|---|
| ru | June | Английский Язык |
| en | июнь | Русский язык |
По умолчанию используется ru
Валидация и индикация успешного ввода даты
За индикацию ошибки или успешного ввода отвечают valueError, valueSuccess.
В данном примере валидация происходит при нажатии клавиши Enter после ввода значений:
Обязательность поля
Наличие индикатора регулируется свойством hasRequiredIndicator.
Обязательность поля задаётся с помощью свойства required.
Если поле является обязательным, то у компонента появляется специальный индикатор.
Изменить расположение индикатора можно с помощью свойства requiredPlacement, которое принимает значения left и right.
Отслеживание отображаемого месяца и года
Свойство onChangeVisibleDate сообщает, какой период сейчас показан в календаре.
Обработчик получает Date — первое число видимого периода: месяца в режиме Days,
года в режимах Months и Quarters, первого года страницы в режиме Years.
Вызывается, когда период меняется:
- при листании стрелками вперёд и назад;
- при выборе месяца или года через заголовок календаря;
- когда новое значение выводит календарь на другой период.
В режиме двойного календаря возвращается левый, первый из отображаемых месяцев.
Обработчик не вызывается при переключении уровня через заголовок (дни → месяцы → годы): меняется масштаб, а не период.
Всплывающая подсказка для событий календаря
С помощью eventList, eventMonthList, eventQuarterList и eventYearList
можно задать список событий для определенной даты
Элемент списка имеет следующую структуру:
type EventDay {
date: Date;
color?: string;
eventInfo?: ReactNode;
}
Типизация свойств всплывающего окна:
type EventTooltipOptions = {
/**
* Обертка для всплывающей подсказки для событий.
*/
bodyWrapper?: FC<PropsWithChildren>;
/**
* Размер всплывающей подсказки для событий.
*/
size?: string;
/**
* Направление раскрытия тултипа.
*/
placement?: PopoverPlacement | Array<PopoverPlacementBasic>;
/**
* Отступ окна относительно элемента, у которого оно вызвано.
* @default
* [0, 8]
*/
offset?: [number, number];
/**
* Видимость стрелки (хвоста).
*/
hasArrow?: boolean;
/**
* Анимированное появление/сокрытие.
*/
animated?: boolean;
/**
* Минимальная ширина окна (в rem).
*/
minWidth?: number | string;
/**
* Максимальная ширина окна (в rem).
*/
maxWidth?: number | string;
};
DatePickerRange
Быстрый старт
Компонент DatePickerRange представляет собой Range с выпадающим календарем.
Календарь может быть одиночным или двойным. За это отвечает свойство isDoubleCalendar.
- Uncontrolled
- Controlled
Управление внешним видом
Размер DatePickerRange задаётся с помощью свойства size.
Возможные значения свойства: "s", "xs".
Календарь может быть одиночным или двойным. За это отвечает свойство isDoubleCalendar.
- Size
- isDoubleCalendar
- isCalendarPositionedByInput
Свойство isCalendarPositionedByInput привязывает одиночный календарь к активному полю ввода.
При переключении между полями открытый календарь перемещается под выбранное поле.
Независимый выбор дат
Поля начальной и конечной даты заполняются независимо — в любом порядке.
При выборе даты через календарь применяется умный своп: если введённые даты расположены в неправильном порядке, они автоматически меняются местами.
При заполнении только второго поля фокус автоматически переходит к первому для завершения диапазона.
Ограничение диапазона дат
Свойства min и max задают допустимый диапазон дат. Свойство includeEdgeDates включает граничные даты в допустимый диапазон.