Calendar Year

Анатомия

1. Тело календаря с выбором года

2. Блок кнопок (для DropdownHost). Когда календарь используется вне инпута (например, в фильтре траблицы). Используется для подтверждения выбора

3. Скролл

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

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

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

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

• При нажатии на значок календаря в правой части InputLayoutYear

• При попадании в фокус поля InputLayoutYear, календарь года появляется и остается открытым до тех пор, пока не будет выбран год или фокус не будет снят

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

Выбор года

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

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

Выбрать год можно:

• Вводом вручную в поле ввода InputLayoutYear

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

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

• Ввод периода вручную в поле InputLayoutYear

• Щелчок по году начала и году окончания периода в календаре

• Переход к году начала с помощью клавиш со стрелками и нажатия Enter. Затем продолжайте использовать клавиши со стрелками для перехода к году окончания периода и снова нажмите Enter.

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

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

Без кнопок ( в InputLayoutYear)

• Щелчок в любом месте за пределами календаря

• Снятие фокуса с InputLayoutYear

• Нажатие Esc

С кнопками (в DropdownHost)

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

Размеры

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

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

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

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

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

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

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

Состояния

Годы календаря имеют 5 состояний:

1. Default. Состояние по умолчанию

2. Hover. При наведении

3. Active. Выбранный год

4. Period. Год, попадающий в выбранный период

5. Disabled. Год, заблокированный для выбора

Фокус (Focus)

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

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