DateTimePicker

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

Uncontrolled

Live Editor

Result

Open in CodeSandbox

Controlled

Live Editor

Result

Open in CodeSandbox

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

Внешний вид компонента зависит от свойств size, isDouble:

Size

Размер DateTimePicker задаётся с помощью свойства size.

Live Editor

Result

Open in CodeSandbox

isDouble

Свойство isDouble включает режим двойного календаря.

Live Editor

Result

Open in CodeSandbox

Выравнивание переключателя периода

Свойство periodSelectorAlign управляет выравниванием переключателя периода в одиночном календаре: start (по умолчанию) — слева, center — по центру между стрелками навигации. Применяется при isDouble={false}.

Center

Live Editor

Result

Open in CodeSandbox

Start

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

Пользовательские названия кварталов

Названия кварталов задаются с помощью свойства quarterNames. По умолчанию используются значения Q1, Q2, Q3, Q4.

Live Editor

Result

Open in CodeSandbox

12-часовой формат (AM/PM)

Свойство hasTimeFormat включает 12-часовой формат: колонка часов показывает значения 12, 01–11, а справа добавляется колонка выбора AM/PM.

AM/PM в поле ввода — не часть текста, а слот textAfter. Если задать свой textAfter, значения склеиваются: например, PM TA.

С клавиатуры AM/PM не вводится — переключается только колонкой в выпадающем списке.

Значение всегда остаётся 24-часовым

hasTimeFormat влияет только на отображение. timeFormat по-прежнему задаётся с HH, а value, defaultDate, min, max и значение в onChangeValue и onCommitDate используют 24-часовой формат. Это позволяет не менять логику приложения при переключении формата.

Полночь и полдень отображаются как 12:00 AM и 12:00 PM соответственно.

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

Подсказки

Для вывода подсказки снизу от поля используйте свойство leftHelper, для подсказки в виде Tooltip - hintText:

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

Ограничение допустимого времени на граничных датах

Свойства min и max принимают объект Date. Они ограничивают как диапазон дат в календаре, так и допустимое время — но только на граничном дне.

Например, если min = new Date(2024, 0, 15, 9, 0, 0), то:

• в календаре нельзя выбрать дату раньше 15 января 2024
• при выборе 15 января часы до 09:00 будут недоступны в таймпикере
• на любой другой дате все значения времени доступны

Live Editor

Result

Open in CodeSandbox

API