Time picker
Time picker — поле для ручного ввода времени или вызова выпадающего списка выбора времени.
Из чего состоит
  1. Поле тайм пикера
  2. Внешний лейбл
  3. Внутренний лейбл
  4. Левая иконка
  5. Текст / Подсказка
  6. Описание под полем
  7. Ошибка
  8. Правая иконка
  9. Элемент выбора времени
  10. Часы/Минуты/Секунды
  11. Единицы времени
  12. Часы
  13. Минуты
  14. Секунды
  15. Область выбора времени
Основные свойства
Тема (Theme)
Состояние (State)
Размер (Size)
Вид (View)
Форма (Form)
Отключаемые элементы
👁 Выбор времени (Time dropdown)
👁 Внешний лейбл (Outside Label)
👁 Внутренний лейбл (Inside Label)
👁 Текст (Text)
👁 Подсказка (Placeholder)
👁 Левая иконка (Left Icon)
👁 Правая иконка (Right Icon)
👁 Описание (Description)
👁 Ошибка (Error)
Редактируемые элементы
✏️ Внешний лейбл (Outside Label)
✏️ Внутренний лейбл (Inside Label)
✏️ Текст (Text)
✏️ Подсказка (Placeholder)
✏️ Левая иконка (Left Icon)
✏️ Правая иконка (Right Icon)
✏️ Описание (Description)
✏️ Ошибка (Error)
Ошибка
Сообщение об ошибке появляется, когда нарушается валидация. Текст сообщения устанавливается для каждого нарушения. Одновременно может быть выведено несколько сообщений об ошибке. Каждое новое сообщение начинается с новой строки. Состояние Time Picker меняется на “State = Error”.
По ширине контейнера
Time Picker можно растягивать в ширину под внешний контейнер.
Внутренние горизонтальные отступы (View = Underline)
Можно отключать внутренние горизонтальные отступы в Time Picker при выборе view “underline”
Иконка крестика
Правая иконка может иметь функционал при использовании иконки «крестик». Нажатие на иконку удаляет введенный текст и возвращает к маске и нулевым значениям в Time Dropdown.
По умолчанию - не отображается.
Маска
Time Picker может содержать любую маску.
Выравнивание выбора времени
Time Dropdown может выравниваться по левому и по правому краю
Секунды
Отображение времени в Time Picker может производиться без секунд, только часы и минуты.
Отображение значений
Если время в поле Time Picker вводится вручную, то в Time Dropdown отображаются введенные значения.
Если время выбрано в Time Dropdown, то оно автоматически отображается в поле Time Picker.

По умолчанию значения в Time Dropdown на нулевых позициях.
Внешний лейбл и описание
Внешний лейбл и описание переносятся на новую строку.
Внутренний лейбл
Внутренний лейбл скрывается в «...» При наведении — тултип.
Плейсхолдер
Плейсхолдер скрываются в «...» При наведении — тултип.
Текст
Текст скрываются в «...» При наведении — тултип.
Два дата пикера
Два Time Picker могут находиться рядом друг с другом и иметь общий функционал — промежуток времени. После выбора значения в первом тайм пикере с помощью Time dropdown, запускается выбор значения во втором. (Открывается Time dropdown)
Анимация прокрутки
Список чисел Time Dropdown прокручивается циклически (бесконечно) в обоих направлениях — вверх и вниз. Прокрутка осуществляется через: drag-and-drop, колесо мыши. Область выбора фиксирована; числовые значения автоматически центрируются в ней при прокрутке.