DateTimePicker

Быстрый старт

Uncontrolled

Live Editor

Result

Open in CodeSandbox

Controlled

Live Editor

Result

Open in CodeSandbox

Управление внешним видом

С помощью свойств:

• size - размер
• isDouble - отображение двойного календаря

Live Editor

Result

Open in CodeSandbox

Формат даты и времени

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

Обозначение	Отображение	Описание
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	Квартал

Формат времени задается с помощью свойства timeFormat.

Обозначение	Отображение	Описание
HH	01-24	Часы, 2 цифры
mm	01-59	Минуты, 2 цифры
ss	01-59	Секунды, 2 цифры

Разделитель форматов даты и времени задается с помощью свойства dateTimeSeparator

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

Live Editor

Result

Open in CodeSandbox

Язык даты

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

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

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

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

Props