<input type="time">
Елементи <input>
типу time
(час) утворюють поля введення, призначені для того, щоб дозволити користувачам легко вводити час (години та хвилини, а також, за бажанням, секунди).
Попри те, що зовнішній вигляд користувацького інтерфейсу цього контрольного елемента залежить від браузера та операційної системи, можливості в нього одні й ті ж. Значення завжди є 24-годинним відформатованим часом hh:mm
або hh:mm:ss
з провідними нулями, незалежно від формату введення UI.
Спробуйте його в дії
Задання атрибута value
Усталене значення поля можна задати при створенні елемента <input>
шляхом включення в атрибут value
дійсного часу, наприклад:
<label for="appt-time">Виберіть час запису: </label>
<input id="appt-time" type="time" name="appt-time" value="13:30" />
Задання значення за допомогою JavaScript
Також отримати та задати значення часу можна за допомогою властивості value
HTMLInputElement
у JavaScript, наприклад:
const timeControl = document.querySelector('input[type="time"]');
timeControl.value = "15:30";
Формат значення часу
Значення поля time
завжди має 24-годинний формат, що включає нулі на початку: hh:mm
, незалежно від формату введення, який, ймовірно, вибирається на основі локалі користувача (або з боку користувацького агента). Якщо час включає секунди (дивіться Використання атрибута step), то формат завжди має вигляд hh:mm:ss
. Дізнатися більше про формат значення часу, який використовується цим типом поля вводу, можна у розділі Рядків часу.
У цьому прикладі можна побачити значення поля часу, увівши час та побачивши, як це значення змінюється.
По-перше, погляньмо на HTML. Він досить простий, з підписом та полем введення, що вже бачено раніше, але з додаванням елемента <p>
зі <span>
, щоб відображати значення поля time
:
<form>
<label for="startTime">Час початку: </label>
<input type="time" id="startTime" />
<p>
Значення поля <code>time</code>: <code>"<span id="value">–</span>"</code>.
</p>
</form>
Код JavaScript додає до поля часу логіку, що відстежує подію input
, яка спрацьовує кожного разу, коли змінюється вміст елемента введення. Коли це стається, вміст <span>
замінюється новим значенням елемента введення.
const startTime = document.getElementById("startTime");
const valueSpan = document.getElementById("value");
startTime.addEventListener(
"input",
() => {
valueSpan.innerText = startTime.value;
},
false,
);
Коли подається форма, що містить поле time
, то його значення перед додаванням до даних форми – кодується. Запис у дані форми для поля часу завжди має форму name=hh%3Amm
, або name=hh%3Amm%3Ass
, якщо включено секунди (дивіться Використання атрибута step).
Додаткові атрибути
На додачу до атрибутів, спільних для всіх елементів <input>
, поля time
приймають наступні.
[!NOTE] На відміну від багатьох типів даних, значення часу мають періодичний інтервал, а отже – значення досягають найвищого можливого значення, а потім знову повертаються до початку. Наприклад, якщо задати
min
зі значенням14:00
таmax
зі значенням2:00
, то це означає, що допустимі значення часу починаються о 14:00, проходять через північ до наступного дня, закінчуючись о 2:00. Дивіться більше в розділі min і max по два боки від півночі цієї статті.
list
Значення атрибута list – це id
елемента <datalist>
, розташованого в тому самому документі. <datalist>
надає список наперед визначених значень, що пропонуються користувачем для поля. Всі значення, що несумісні з type
, не включаються в список запропонованих варіантів. Ці варіанти є пропозиціями, а не обов'язковими: користувачі можуть як обирати серед них, так і ввести інше значення.
max
Рядок, що вказує на найпізніший час, що буде прийнятий, заданий у тому самому форматі значення часу, описаному вище. Якщо заданий рядок не є дійсним часом, то максимальне значення не задається.
min
Рядок, що задає найраніший час, що буде прийнятий, заданий у тому самому форматі значення часу, описаному вище. Якщо заданий рядок не є дійсним часом, то мінімальне значення не задається.
readonly
Булів атрибут, котрий, якщо присутній, означає, що користувач не може редагувати поле. Проте value
цього поля усе ж може бути змінено кодом JavaScript, шляхом безпосереднього присвоєння властивості value
об'єкта HTMLInputElement
.
[!NOTE] Оскільки таке поле не може мати значення,
required
не діє на поля, на котрих також задано атрибутreadonly
.
step
Атрибут step
– це число, що задає дискретність, якій повинно відповідати значення, або спеціальне значення any
, описане нижче. Лише значення, що дорівнюють основі для кроку (min
, якщо цей атрибут задано, інакше – value
, іще інакше – відповідне усталене значення) є дійсними.
Рядкове значення any
означає, що крокування не накладається, і дозволено будь-яке значення (за винятком інших обмежень, як то min
і max
).
[!NOTE] Коли введені користувачем дані не відповідають налаштуванням крокування, то користувацький агент може округлити до найближчого дійсного значення, віддаючи перевагу числам у позитивному напрямку, коли є два однаково близьких варіанти.
Для полів time
значення step
дається в секундах, з масштабним фактором 1000 (оскільки за лаштунками числове значення зберігається в мілісекундах). Усталене значення step
– 60, що відповідає 60 секундам (або 1 хвилині, або 60.000 мілісекунд).
Коли step
має значення any
, то вживається усталене значення 60 секунд, а секундне значення не виводиться в UI.
Використання полів часу
Базове використання time
Найпростіше використання <input type="time">
включає базову комбінацію елементів <input>
і <label>
, як показано нижче:
<form>
<label for="appt-time">Оберіть час запису: </label>
<input id="appt-time" type="time" name="appt-time" />
</form>
Контроль розміру поля
Елемент <input type="time">
не підтримує атрибути розміру форми, як то size
, оскільки час завжди має приблизно однакову довжину в символах. Для потреб задання розміру доведеться використовувати CSS.
Використання атрибута step
Для зміни кількості часу, на котру відбувається стрибок при інкременті або декременті, можна скористатися атрибутом step
(наприклад, так, щоб час змінювався на 10 хвилин при кожному клацанні маленьких віджетів стрілок).
Цей атрибут приймає ціле числове значення, що визначає кількість секунд, на яку відбувається інкремент; усталене значення – 60 секунд. Коли вживається це усталене значення, більшість UI часу в користувацьких агентах виводить години та хвилини, але не секунди. Додання атрибута step
з будь-яким числовим значенням, що не ділиться на 60
, додає до UI секунди, якщо цього ще не зробили значення min
або max
.
<form>
<label for="appt-time">Оберіть час запису: </label>
<input id="appt-time" type="time" name="appt-time" step="2" />
</form>
Щоб задати як крок хвилини або години, задайте число хвилин або годин у секундах, наприклад, 120 для 2 хвилин або 7200 для 2 годин.
Валідація
Усталено <input type="time">
не застосовує до введених значень жодної валідації, окрім того, що інтерфейс користувацького агента загалом не дозволяє ввести нічого, крім значення часу. Це корисно, але не можна повністю покладатися на те, що значення буде коректним часовим рядком, оскільки воно може бути порожнім рядком (""
), що допускається.
Задання максимального та мінімального часу
Для обмеження діапазону допустимих значень часу, котрі може обрати користувач, можна використовувати атрибути min
і max
. У наступному прикладі задається мінімальний час 12:00
та максимальний час 18:00
:
<form>
<label for="appt-time">
Оберіть час запису (робочі години з 12:00 до 18:00):
</label>
<input id="appt-time" type="time" name="appt-time" min="12:00" max="18:00" />
<span class="validity"></span>
</form>
Ось CSS, використаний у прикладі вище. Тут використовуються властивості CSS :valid
та :invalid
, щоб оформити поле на основі того, чи є поточне значення дійсним. Піктограма додана через згенерований вміст (поле content) в елементі <span>
поряд з полем.
div {
margin-bottom: 10px;
position: relative;
}
input[type="number"] {
width: 100px;
}
input + span {
padding-right: 30px;
}
input:invalid + span::after {
position: absolute;
content: "✖";
padding-left: 5px;
}
input:valid + span::after {
position: absolute;
content: "✓";
padding-left: 5px;
}
Результатом є те, що:
- Лише час між 12:00 і 18:00 вважатиметься дійсним; час поза цим діапазоном буде позначений як недійсний.
min і max по два боки від півночі
Якщо задати атрибут min
зі значенням, що більше за значення атрибута max
, то отриманий діапазон загорнеться через північ, і вийде дійсний діапазон. Така функціональність не підтримується жодними іншими типами полів.
const input = document.createElement("input");
input.type = "time";
input.min = "23:00";
input.max = "01:00";
input.value = "23:59";
if (input.validity.valid && input.type === "time") {
// Розвернений діапазон <input type=time> підтримується
} else {
// Розвернений діапазон <input type=time> не підтримується
}
Обов'язковість часу
На додачу можна скористатися атрибутом required
, щоб зробити заповнення часу обов'язковим. Браузери покажуть помилку, якщо спробувати подати час, що виходить за задані межі, або пусте поле часу.
Погляньмо на приклад; тут задано мінімальний і максимальний час, а також поле зроблено обов'язковим:
<form>
<div>
<label for="appt-time">
Оберіть час запису (робочі години з 12:00 до 18:00):
</label>
<input
id="appt-time"
type="time"
name="appt-time"
min="12:00"
max="18:00"
required />
<span class="validity"></span>
</div>
<div>
<input type="submit" value="Подати форму" />
</div>
</form>
Якщо спробувати подати форму з незаповненим часом (або часом поза заданими межами), то браузер покаже помилку. Спробуйте погратися з цим прикладом:
[!WARNING] Валідація форм HTML не є заміною сценаріїв, що пересвідчуються в тому, що введені дані мають коректний формат.Занадто легко підлаштувати HTML, щоб обійти валідацію, або навіть геть її прибрати. Також можна обійти HTML взагалі, й подавати дані безпосередньо на сервер. Якщо ваш код на серверному боці не може валідувати дані, котрі отримує, то може статись лихо, коли в вашу базу даних введуть некоректно відформатовані дані (або завеликі дані, дані не того типу, і так далі).
Приклади
У цьому прикладі створюється елемент інтерфейсу для вибору часу; використовується нативний інтерфейс, створений за допомогою <input type="time">
:
HTML
<form>
<label for="appt-time">
Оберіть час запису (робочі години від 12:00 до 18:00):
</label>
<input
id="appt-time"
type="time"
name="appt-time"
min="12:00"
max="18:00"
required />
<span class="validity"></span
CSS
input[type="number"] {
width: 100px;
}
input + span {
padding-right: 30px;
}
input:invalid + span::after {
position: absolute;
content: "✖";
padding-left: 5px;
}
input:valid + span::after {
position: absolute;
content: "✓";
padding-left: 5px;
}
Результат
Технічний підсумок
Значення | Рядок, що представляє час, або порожній. |
Події |
change та
input
|
Доступні спільні атрибути |
autocomplete ,
list ,
readonly ,
step
|
Атрибути IDL |
list ,
value ,
valueAsDate ,
valueAsNumber
|
Інтерфейс DOM | |
Методи |
select() ,
stepDown()
і
stepUp() .
|
Неявна роль ARIA | немає відповідної ролі |
Специфікації
Специфікація |
---|
HTML Standard (HTML) # time-state-(type=time) |
Сумісність із браузерами
desktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
type="time"
|
Chrome Full support 20 | Edge Full support 12 | Firefox Full support 57 | Internet Explorer No support Ні | Opera Full support 10 | Safari Full support 14.1 | WebView Android Full support Так | Chrome Android Full support 25 | Firefox for Android Full support 57 | Opera Android Full support Так | Safari on iOS Full support Так | Samsung Internet Full support 1.5 |
Дивіться також
<input type="date">
<input type="datetime-local">
<input type="week">
<input type="month">
- Загальний елемент
<input>
та інтерфейс, що використовується для роботи з ним, –HTMLInputElement
- Формати дати та часу, що використовуються в HTML
- Підручник з інтерфейсу вибору дати та часу
- Сумісність властивостей CSS