Определение

Выбор даты используется для выбора даты пользователем. Он может быть использован в формах, фильтрах и других местах, где необходимо указать дату. Компонент может быть представлен как выпадающий календарь или встроенный элемент на странице.

Функциональность

Компонент предоставляет удобный календарь для выбора одной даты или диапазона с начальной и конечной датой, автоматически выделяя промежуток между ними, поддерживает переключение между месяцами

Открывается при клике на иконку календаря и закрывается при клике вне его области или нажатии клавиши ESC.

Дизайн и Стиль

Размер и Форма

Date Picker имеет фиксированный размер, как в состоянии одиночного выбора, так и при выборе периода

Цвет и Контраст

Соблюдайте общие цветовые правила дизайн-системы. Палитра Plex отвечает стандартам контрастности WCAG.

Варианты

Одиночная дата (Single Date)

Позволяет выбрать одну дату.

Если в поле выбора даты предусмотрено указание времени, компонент должен автоматически включать возможность выбора точного времени, включая часы, минуты и, при необходимости, секунды. 

Диапазон дат (Date Range)

Позволяет выбрать диапазон дат, предоставляя удобный интерфейс для задания начальной и конечной даты. Он используется в случаях, когда требуется указать период, а поле выбора даты должно чётко указывать на эту возможность, чтобы пользователь заранее понимал, что будет происходить выбор диапазона.

При выборе периода в тулбаре отображается подсказка, показывающая выбранный диапазон дат для удобства и наглядности.

Если в поле выбора периода предусмотрено указание времени, компонент должен автоматически включать возможность выбора точного времени, включая часы, минуты и, при необходимости, секунды. 

При выборе периода в тулбаре отображается подсказка, показывающая выбранный диапазон дат и временного интервала для удобства и наглядности.

Быстрое переключение Года и Месяца

Для быстрого переключения используйте двойные стрелки, чтобы сменить год, и одинарные — для перехода между месяцами.

Выбор Года и Месяца

Чтобы выбрать конкретный месяц или год, нажмите на название месяца или цифры года. Календарь переключится на соответствующий режим выбора.

Чтобы вернуться к календарю, необходимо выбрать год или месяц соответсвенно

Ручной ввод даты

Пользователь может ввести дату с помощью клавиатуры. При этом должен быть недоступен ввод буквенных значений

Если на выбранную дату приходится событие, она отмечается точкой под цифрой дня, чтобы пользователь мог быстро заметить наличие события.

Событие

Свойства

Состояния

Дни месяца

Месяца

Года

Анатомия

Для понимания анатомии входящих компонентов смотри примеры Кнопка (Button), Метка (Label), Поле ввода (Input)