Поле с временем (таймпикер) — это специальное поле ввода, которое позволяет вводить только время.
Используйте, когда нужно указать время.
Состоит из поля ввода, маски и иконки (опционально).
Маска ввода бывает в двух вариациях, с разными форматами времени:
Время можно вводить двумя способами: с помощью клавиш цифр и с помощью клавиш стрелок на клавиатуре. Ввод времени допустим только в 24-часовом формате.
При вводе значений, в зависимости то того, в каком месте (часы, минуты или секунды) установлен фокус, поле в этом месте выполняет проверку на допустимые значения: часы 0–23, минуты и секунды 0–59.
После ввода двух цифр (часы или минуты) подставляется двоеточие, каретка перескакивает в следующую часть маски (в минуты или в секунды). После ввода двух цифр секунд каретка не меняет своего положения, двоеточие не подставляется.
Клавиши ↑ ↓ увеличивают или уменьшают выделенную единицу времени на 1. Увеличение (уменьшение) затрагивает только выделенную единицу (например, в часах за 23 следует 0, и наоборот).
Подробнее про ввод см. в разделе Фокус и работа с клавиатурой.
В большинстве случаев поле пустое, показана только маска ввода. В других случаях, когда указание времени неважно для пользователя, но важно для системы, будет полезным поле предзаполнить текущим временем (под текущим понимается время открытия страницы, оно не меняется динамически).
Срабатывает валидация во время ввода значений:
- при вводе букв в любую часть маски;
- при вводе первого символа, кроме цифр.
Если после ввода двух цифр (в часы или минуты) вводится любой символ кроме цифр и букв, поле игнорирует этот ввод.
Если после ввода одной цифры (в часы или минуты) вводится любой символ кроме цифр и букв, поле воспринимает этот символ как разделитель и преобразует его в двоеточие, а перед введенной цифрой подставляется ноль.
Если ввести значения больше 23 для часов и больше 59 для минут и секунд, они преобразуются в 23 для часов и 59 для минут и секунд.
При копировании значений из буфера или вставке их с помощью drag-and-drop срабатывает валидация во время ввода значений. Если в скопированном значении содержались символы кроме цифр и букв, к ним применяются правила из раздела выше «Ввод символов и цифр».
Клавиша |
Действие |
|---|---|
| \ + | Перевести фокус в поле с временем (из него) |
| Каретка установлена на любой единице (часы, минуты или секунды) времени → уменьшение или увеличение значения на 1 | |
| Перенести каретку на следующий символ. Если каретка установлена за последней единицей времени (минут или секунд, в зависимости от вариации), поместить каретку перед первой цифрой часа | |
| Перенести каретку на предыдущий символ. Если каретка установлена перед первой цифрой часа, переместить каретку за последнюю единицу времени (минут или секунд, в зависимости от вариации) | |
| \ | Поместить каретку перед первой цифрой часа |
| \ | Перенести каретку за последнюю единицу времени (минут или секунд, в зависимости от вариации) |
| — Если в любой части маски → ничего не происходит | |
| — Если после ввода двух цифр (часов или минут) → переход к следующей части маски (минутам или секундам); | |
| — Если после ввода одной цифры (в часы или в минуты) → поле воспринимает эту клавишу как разделитель, подставляется двоеточие, а перед введенной цифрой подставляется ноль |
Поле с временем имеет фиксированную ширину, которая строится по формуле левый отступ + маска + правый отступ.
Ширина маски для каждого языка будет своя, после ввода времени ширина не меняется, даже если введенное значение будет меньше ширины маски.
Левый отступ разный, в зависимости от вариации (с иконкой или без). Правый отступ всегда 16px.
Это пример совместного использования Datepicker и Timepicker для выбора определенной даты и времени. Такой подход удобен в тех случаях, когда требуется задать точное время события или дедлайна.
Пользователь может выбрать дату через Datepicker, а затем указать конкретное время через Timepicker.
Пример реализации доступен в разделе Datepicker