Поле с временем TimePicker

Поле с временем помогает ввести время с клавиатуры или выбрать его мышью.

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

Когда поле получает фокус, курсор встаёт в блок с часами.

Как только часы заполнены, курсор переходит на минуты.

Когда заполнены и часы, и минуты, поле не теряет фокус.

Если заполнены только часы, то по потере фокуса минуты заполнятся нулями.

Если заполнена только одна цифра минут, то по потере фокуса перед ней подставится ноль.

Используйте раскрывающийся список с готовыми значениями для сценария пользователя — так он быстрее заполнит нужное время.

Например, для расписания можно добавить значения с шагом 15 минут.

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

Например, для расписания можно указать продолжительность каждого интервала.

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

Если совпадений с введённым значением нет, список скрывается и остаётся только ручной ввод.

Если выбрать значение мышью, список скроется, а поле не потеряет фокус.

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

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

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

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

По умолчанию поле работает в 24-часовом формате. Когда нужно, переключите его на 12-часовой. Используйте переключатель.

В часы можно ввести одну цифру и сразу перейти к минутам: кликнуть по ним, нажать Space, Tab или →. Фокус перейдёт на минуты, а к часам добавится ведущий ноль.

Клавиша ↓ выделяет первый элемент списка.

Enter выбирает выделенное значение.

Клавиши ← и → перемещают курсор между часами и минутами.

Backspace удаляет цифры активного блока с конца по одной, а Delete очищает весь блок в фокусе.

Поле с временем выглядит как обычное поле ввода с иконкой часов и бывает трёх размеров. Подробнее — в гайде про поле ввода.

Часы валидируются по формату времени:

• в 24-часовом можно ввести от 00 до 23,
• в 12-часовом для AM — от 00 до 11, для PM — от 12 до 23.

Если значение больше допустимого, поле мигает и не меняется.

Минуты и секунды валидируются одинаково: можно ввести от 00 до 59. Если ввести больше, поле примет первую цифру, но на второй мигнёт — так пользователь успеет исправить опечатку до автоформата. Когда поле теряет фокус, оно приводит значение к правильному формату.

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

Подбронее читайте в гайде Валидация.