🚧Time Picker

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

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

Анатомия

Выбор минут
Выбор секунд
Тело timepicker
Блок кнопок

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

Открытие timepicker

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

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

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

При нажатии на иконку часов в правой части InputLayoutDateTime
При попадании в фокус поля InputLayoutTime

Выбор времени

Время можно выбрать:

Вводом времени вручную в поле InputLayoutDateTime/InputLayoutTime
Выбором часов, минут и секунд в timepicker

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

Вводом часов вручную в поле InputLayoutDateTime/InputLayoutTime
Кликом по часам в timepicker в области (ЧЧ)

Выбор минут

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

Вводом минут вручную в поле InputLayoutDateTime/InputLayoutTime
Выбором минут через область, отображающуюся по клику на соответствующий селектор (ММ)

После нажатия на селектор минут (ММ), тело timepicker отображает область с минутами:

Выбор секунд

Секунды можно выбрать:

Вводом секунд вручную в поле InputLayoutDateTime/InputLayoutTime
Выбором секунд через область, отображающуюся по клику на соответствующий селектор (СС)

После нажатия на селектор секунд (СС), тело timepicker отображает область с секундами:

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

В случае, когда пользователь выбирает другой час, минуту или секунду, это не влияет на остальные параметры выбора. Например: в timepicker выбрано «15:03:10», если сменить минуты на 15, то время станет «15:15:10».

Частичный выбор

В случае, когда пользователь выбирал только час, минуту или секунду, остальные параметры в случае применения заменятся на «00». Например: в timepicker выбрано только часы «22:ММ:СС», и при нажатии на кнопку «Применить», время будет «22:00:00».

Закрытие timepicker

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

Без кнопок

Щелчок в любом месте за пределами timepicker, при условии, что пользователь ничего не вводил
Нажатие Esc

С кнопками

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

Размеры

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

Timepicker имеет фиксированную высоту - 308 px, и фиксированную ширину 272 px.

В теле timepicker всегда вмещает максимальное необходимое количество строк - 4. В области минут и секунд для просмотра всех строк имеется скролл:

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

Боковые паддинги тела timepicker по 16 px

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

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

Выравнивается timepicker по умолчанию по правому краю от инпута. Если интерфейс имеет ограниченное пространство или если рядом есть другие элементы, которые могут мешать, допускается выравнивание timepickera по левой стороне.

Виды

Есть два вида timepicker:

ЧЧ:ММ:СС (часы:минуты:секунды)
ЧЧ:ММ (часы:минуты)

Логика работы ЧЧ:ММ идентична, выше описанному ЧЧ:ММ:СС.

Состояния

Default. Состояние по умолчанию
Hover. При наведении
Active. Выбранный час/минута/секунда
Disabled. Час/минута/секунда, заблокированные для выбора

Фокус (Focus)

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

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