Calendar

Общая информация

Анатомия

Заголовок (опционально)
Выбор месяца и года
Стрелки прокрутки. Меняют содержимое календаря на месяц вперед / назад.
Дни недели. По умолчанию неделя начинается с понедельника. Опционально - это правило может быть локализовано.
Тело календаря
Блок кнопок (опционально). Используется для подтверждения выбора, если выбор даты может вызывать нагрузку на систему

Описание работы

Открытие каледаря

Открытие календаря происходит двумя способами:

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

Выбор даты

Дату можно выбрать:

Вводом даты вручную в поле DatePicker
Выбором числа, месяца и года в календаре

Выбор числа

Число можно выбрать:

Кликом по числу в календаре
Переходом к числу с помощью клавиш со стрелками и нажатия Enter

Выбор месяца и года

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

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

Выбрать месяц и год можно:

Вводом вручную в поле ввода DatePicker
Выбором месяца и даты через списки, раскрывающиеся по клику на соответствующие селекторы:,,

После нажатия на селектор месяца, тело календаря отображает 12 месяцев.

Возврат к дням месяца возможен:

Автоматически после клика на месяц
Повторным нажатием на селектор месяца
Нажатием на кнопку “Назад”

После нажатия на селектор года, тело календаря отображает 15 лет. Текущий год по умолчанию находится в центре плитки.

Прокрутка годов возможна:

По клику на стрелки вверх и вниз в правом верхнем углу
Прокруткой внутри тела календаря.

Возврат к дням возможен:

автоматически после клика на год
Повторным нажатием на селектор года
Нажатием на кнопку “Назад”

После выбора месяца или года календарь возвращается в состояние по умолчанию (визуализация дней месяца):

Изменение текущего выбора

В случае, когда пользователь выбирает другой месяц, год или число, это не влияет на остальные параметры выбора.  Например: «В календаре выбрано „3 августа 2022 года“, если сменить месяц на Сентябрь, то дата станет „3 сентября 2022 года“».

Выбор периода

Есть 2 варианта выбора периода:

Период задан датами. Выбор периода в таком случае происходит за счет одной формы DatePicker и сдвоенного календаря. Период можно выбрать:
- Ввод периода вручную в поле DatePicker
- Щелчок по дате начала и дате окончания периода календаре
- Переход к дате начала с помощью клавиш со стрелками и нажатия Enter. Затем продолжайте использовать клавиши со стрелками для перехода к дате окончания периода и снова нажмите Enter.
Период задан датами и временем. Выбор периода в таком случае происходит за счет двух форм DatePicker с одинарными календарями.

Закрытие календаря

Календарь можно закрыть одним из следующих способов:

Без кнопок

Щелчок в любом месте за пределами календаря
Снятие фокуса с DatePicker
Нажатие Esc

С кнопками

В случае, если для подтверждения выбора используется кнопка “Выбрать”, то календарь закрывается по клику на нее или на кнопку “Отменить”

События

Для каждого дня в календаре может быть зафиксировано событие. Событие отображается в виде подчеркивания под датой. Цвет подчеркивания соответствует введенным в дизайн-систему индикаторам:

В случае, если в один день зафиксировано несколько событий - выбирайте максимально “яркую” индикацию:

default / warning / success + danger = danger
default / success + warning = warning
default + success = success

Размеры

Внешние размеры

Календари имеют динамическую высоту, в зависимости от входящих в неё дополнительных блоков (например, с заголовком или кнопками подтверждения выбора) и фиксированную ширину 312 px.

Высота тела календаря имеет фиксированную высоту и всегда вмещает максимальное необходимое количество строк - 6.

Внутренние размеры

Боковые паддинги календаря по 16 px

Расположение

Расстояние от формы ввода до календаря - 4 рх

Выравниваются календари всегда по левому краю от формы DatePicker.

Состояния

Числа/месяцы/годы календаря имеют 6 состояний:

Default. Состояние по умолчанию
Hover. При наведении
Active. Выбранный день
Period. День, попадающий в выбранный период
Outer. День, относящийся к другому месяцу
Disabled. День, заблокированный для выбора

Фокус (Focus)

Так же существует состояние Focus. Он появляется в момент выбора дня с помощью клавиатуры или при клике в выбранный элемент, и может быть совмещен с любым другим состоянием. Невозможен в состоянии Disabled.

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