Time Picker

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

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

Анатомия

  1. Выбор часов

  2. Выбор минут

  3. Выбор секунд

  4. Тело timepicker

  5. Блок кнопок

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

Открытие 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 выбраны только секунды «ЧЧ:ММ:20», и при нажатии на кнопку «Применить», время будет «01:00:20».

2 пример: ограничение по времени 1 час 14 минут 0 секунд. Сначала пользователь выбрал 59 секунд, затем 15 минут, а затем выбрал 1 час. После выбора часа, минуты и секунды автоматически перестраиваются на ближайшие или возможно допустимые минуты и секунды, до нажатия кнопки «Применить». И в данном случае получим «01:14:00».

Закрытие timepicker

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

Без кнопок

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

  • Нажатие Esc

С кнопками

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

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

Размеры

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

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

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

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

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

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

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

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

Виды

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

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

  • ЧЧ:ММ (часы:минуты)

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

Состояния

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

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

  3. Active. Выбранный час/минута/секунда

  4. Disabled. Час/минута/секунда, заблокированные для выбора

Фокус (Focus)

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

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

Last updated

Was this helpful?