Calendar
Last updated
Was this helpful?
Last updated
Was this helpful?
Заголовок (опционально)
Выбор месяца и года
Стрелки прокрутки. Меняют содержимое календаря на месяц вперед / назад.
Дни недели. По умолчанию неделя начинается с понедельника. Опционально - это правило может быть локализовано.
Тело календаря
Блок кнопок (опционально). Используется для подтверждения выбора, если выбор даты может вызывать нагрузку на систему
При нажатии на значок календаря в правой части DatePicker
При попадании в фокус поля DatePicker, календарь появляется и остается открытым до тех пор, пока не будет выбрана дата или фокус не будет снят
Вводом даты вручную в поле DatePicker
Выбором числа, месяца и года в календаре
Кликом по числу в календаре
Переходом к числу с помощью клавиш со стрелками и нажатия Enter
По умолчанию, а так же при первом выборе мы предлагаем показывать пользователю календарь с текущей датой, но в зависимости от решаемой задачи или контекста, стартовое значение может быть изменено.
В случае, если пользователем уже был сделан выбор даты, то при повторном вызове календаря открывается месяц и год, соответствующие выбранной дате.
Вводом вручную в поле ввода DatePicker
Выбором месяца и даты через списки, раскрывающиеся по клику на соответствующие селекторы:,,
После нажатия на селектор месяца, тело календаря отображает 12 месяцев.
Автоматически после клика на месяц
Повторным нажатием на селектор месяца
Нажатием на кнопку “Назад”
После нажатия на селектор года, тело календаря отображает 15 лет. Текущий год по умолчанию находится в центре плитки.
По клику на стрелки вверх и вниз в правом верхнем углу
Прокруткой внутри тела календаря.
автоматически после клика на год
Повторным нажатием на селектор года
Нажатием на кнопку “Назад”
После выбора месяца или года календарь возвращается в состояние по умолчанию (визуализация дней месяца):
В случае, когда пользователь выбирает другой месяц, год или число, это не влияет на остальные параметры выбора. Например: «В календаре выбрано „3 августа 2022 года“, если сменить месяц на Сентябрь, то дата станет „3 сентября 2022 года“».
Период задан датами. Выбор периода в таком случае происходит за счет одной формы 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. Он появляется в момент выбора дня с помощью клавиатуры или при клике в выбранный элемент, и может быть совмещен с любым другим состоянием. Невозможен в состоянии Disabled.
