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

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

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

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

После нажатия на селектор месяца, тело календаря отображает 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.

Цвета
Общее
Last updated
Was this helpful?