DatePicker

Использование​

Компонент DatePicker представляет собой поле ввода даты с выпадающим календарем.

Размер компонента​

Размер DatePicker задаётся с помощью свойства size. Возможные значения свойства: "l", "m", "s", "xs".

Live Editor
Result
Open in CodeSandbox

Формат даты​

Формат даты задается с помощью свойства format.

ОбозначениеОтображениеОписание
DD01-31Дни месяца, 2 цифры
D1-31Дни месяца
MMMMJanuary...December / январь...декабрьМесяц года, полное название
MMMJan...Dec / янв.-дек.Месяц года, сокращенное название
MM01-12Месяц года, 2 цифры
M1-12Месяц года
YYYY2024Год из 4 цифр
YY24Год из 2 цифр
Q1-4Квартал

При выборе даты в календаре или вводе даты через поле ввода, дата будет приводиться к заданному формату. Свойство maskWithFormat позволяет маскировать ввод, кроме случаев когда месяц имеет формат полной записи MMMM:

Live Editor
Result
Open in CodeSandbox

Язык даты​

Язык даты задается с помощью свойства lang.

ОбозначениеОтображениеОписание
ruJuneАнглийский Язык
enиюньРусский язык

По умолчанию используется ru

Live Editor
Result
Open in CodeSandbox

Валидация и индикация успешного ввода даты.​

За индикацию ошибки или успешного ввода отвечают valueError, valueSuccess. В данном примере валидация происходит при нажатии клавиши Enter после ввода значений:

Live Editor
Result
Open in CodeSandbox

Обязательность поля​

tip

Наличие индикатора регулируется свойством hasRequiredIndicator.

Обязательность поля задаётся с помощью свойства required. Если поле является обязательным, то у компонента появляется специальный индикатор. Изменить расположение индикатора можно с помощью свойства requiredPlacement, которое принимает значения left и right.

Live Editor
Result
Open in CodeSandbox

Всплывающая подсказка для событий календаря​

С помощью 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;
};
Live Editor
Result
Open in CodeSandbox

DatePickerRange​

Компонент DatePickerRange представляет собой Range с выпадающим календарем. Календарь может быть одиночным или двойным. За это отвечает свойство isDoubleCalendar.

Live Editor
Result
Open in CodeSandbox

Контролируемый вариант компонента​

Для передачи текущего значения необходимо использовать свойство value. Чтобы отслеживать изменения, полученные в поле ввода необходимо использовать onChangeValue. Свойство onCommitDate вызывается, когда выбор даты сделан с помощью выпадающего календарая или же в поле ввода введена корректная дата.

Live Editor
Result
Open in CodeSandbox