<input type="time"> атрибута HTML

Элементы <input> типа time создают поля ввода, позволяющие пользователю легко указать время (часы и минуты, а также при необходимости секунды).

Хотя внешний вид пользовательского интерфейса элемента управления зависит от браузера и операционной системы, его функции остаются одинаковыми. Значение всегда представляет собой время в 24-часовом формате HH:mm или HH:mm:ss с ведущими нулями, независимо от формата ввода в пользовательском интерфейсе.

Попробуйте

<label for="appointment">Choose a time for your meeting:</label>

<input
  type="time"
  id="appointment"
  name="appointment"
  min="09:00"
  max="18:00"
  required />

<small>Office hours are 9am to 6pm</small>

label {
  display: block;
  font:
    1rem "Fira Sans",
    sans-serif;
}

input,
label {
  margin: 0.4rem 0;
}

Дополнительные атрибуты

Помимо атрибутов, общих для всех элементов <input>, поля ввода time поддерживают следующие атрибуты.

list

Значение атрибута list — это id элемента <datalist>, расположенного в том же документе. Элемент <datalist> предоставляет список предопределённых значений, которые можно предложить пользователю для этого поля ввода. Значения из списка, несовместимые с type, не включаются в предлагаемые варианты. Указанные значения являются подсказками, а не обязательными требованиями: пользователь может выбрать значение из предопределённого списка или ввести другое.

max

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

min

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

readonly

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

step

Атрибут step — это число, задающее шаг изменения значения, или специальное значение any, описанное ниже. Допустимы только значения, отличающиеся от базового значения на целое число шагов. Базовым значением шага является min, если он указан, в противном случае — value, а если не указано ни одно из них — 0 (00:00:00).

Для полей ввода time значение step задаётся в секундах и интерпретируется как число миллисекунд, равное значению step, умноженному на 1000 (внутреннее числовое значение задаётся в миллисекундах). Значение по умолчанию — 60, что соответствует 1 минуте.

Строковое значение any означает, что шаг не задан и допускается любое значение (с учётом других ограничений, например min и max). На практике для полей ввода time оно действует так же, как 60, поскольку в этом случае интерфейс выбора времени позволяет выбирать только целые минуты.

Проверка достоверности

По умолчанию <input type="time"> не проверяет введённые значения, за исключением того, что интерфейс пользовательского агента обычно не позволяет вводить ничего, кроме значения времени. Это полезно, но нельзя полностью полагаться на то, что значение будет правильной строкой времени, поскольку оно может быть пустой строкой (""), что разрешено. Примеры проверки ограничений с помощью атрибутов min, max, step и required см. в разделе «Установка максимального и минимального времени».

Примеры

Основные способы использования времени

Для самого простого использования <input type="time"> достаточно базового сочетания <input> и элемента <label>, как показано ниже:

<form>
  <label for="appointment-time">Choose an appointment time: </label>
  <input id="appointment-time" type="time" name="appointment-time" />
</form>

Создание интерфейса выбора времени

В этом примере мы создадим элемент интерфейса для выбора времени с помощью встроенного средства выбора, созданного с использованием <input type="time">:

<form>
  <label for="appointment-time">
    Choose an appointment time (opening hours 12:00 to 18:00):
  </label>
  <input
    id="appointment-time"
    type="time"
    name="appointment-time"
    min="12:00"
    max="18:00"
    required />
  <span class="validity"></span>
</form>

input[type="time"] {
  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;
}

Управление размером поля ввода

<input type="time"> не поддерживает атрибуты управления размером формы, такие как size, поскольку время всегда состоит примерно из одинакового количества символов. Для изменения размера потребуется использовать CSS.

Задание атрибута value

Можно задать значение поля ввода по умолчанию, указав допустимое время в атрибуте value при создании элемента <input>, например:

<label for="appointment-time">Choose an appointment time: </label>
<input
  id="appointment-time"
  type="time"
  name="appointment-time"
  value="13:30" />

Задание значения с помощью JavaScript

Также можно получать и задавать значение времени в JavaScript с помощью свойства HTMLInputElement value, например:

const timeControl = document.querySelector('input[type="time"]');
timeControl.value = "15:30";

Формат значения времени

Значение value поля ввода time всегда задаётся в 24-часовом формате с ведущими нулями: HH:mm, независимо от формата ввода, который, вероятно, выбирается на основе локали пользователя (или пользовательским агентом). Если значение времени содержит секунды (см. раздел «Использование атрибута step»), формат всегда имеет вид HH:mm:ss. Подробнее о формате значения времени, используемом этим типом поля ввода, можно узнать в разделе «Строки времени».

В этом примере можно увидеть значение поля ввода времени: введите время и посмотрите, как оно изменится.

Сначала рассмотрим HTML. Мы добавим подпись и поле ввода, а также элемент <p> с элементом <span>, чтобы отображать значение поля ввода time:

<form>
  <label for="startTime">Start time: </label>
  <input type="time" id="startTime" />
  <p>
    Value of the <code>time</code> input:
    <code>"<span id="value">n/a</span>"</code>.
  </p>
</form>

Код JavaScript добавляет к полю ввода времени обработчик события input, которое срабатывает каждый раз при изменении содержимого поля ввода. При этом содержимое элемента <span> заменяется новым значением элемента ввода.

const startTime = document.getElementById("startTime");
const valueSpan = document.getElementById("value");

startTime.addEventListener("input", () => {
  valueSpan.innerText = startTime.value;
});

При отправке формы, содержащей поле ввода time, значение кодируется перед добавлением в данные формы. Значение поля времени в данных формы всегда имеет вид name=HH%3Amm или name=HH%3Amm%3Ass, если указаны секунды (см. раздел «Использование атрибута step»).

Использование атрибута step

С помощью атрибута step можно задавать интервал изменения времени при его увеличении или уменьшении (например, чтобы при нажатии небольших кнопок со стрелками время изменялось на 10 минут).

Атрибут принимает целое значение, задающее количество секунд для увеличения; по умолчанию оно равно 60 секундам. При значении по умолчанию большинство интерфейсов времени пользовательских агентов отображают часы и минуты, но не секунды. Если указать атрибут step с любым числовым значением, не кратным 60, в интерфейсе появятся секунды, если значение min или max ещё не привело к их отображению.

<form>
  <label for="appointment-time">Choose an appointment time: </label>
  <input id="appointment-time" type="time" name="appointment-time" step="2" />
</form>

Чтобы задать шаг в минутах или часах, укажите количество минут или часов в секундах, например 120 для 2 минут или 7200 для 2 часов.

Установка максимального и минимального времени

С помощью атрибутов min и max можно ограничить допустимое время, которое может выбрать пользователь. В следующем примере мы задаём минимальное время 12:00 и максимальное время 18:00:

<form>
  <label for="appointment-time">
    Choose an appointment time (opening hours 12:00 to 18:00):
  </label>
  <input
    id="appointment-time"
    type="time"
    name="appointment-time"
    min="12:00"
    max="18:00" />
  <span class="validity"></span>
</form>

Ниже приведён CSS, используемый в примере выше. Мы используем CSS-псевдоклассы :valid и :invalid, чтобы оформлять поле ввода в зависимости от того, является ли текущее значение допустимым. Рядом с полем ввода мы добавляем значок с помощью генерируемого содержимого элемента <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> reversed range supported
} else {
  // <input type=time> reversed range unsupported
}

Обязательное указание времени

Кроме того, можно использовать атрибут required, чтобы сделать указание времени обязательным. Браузеры покажут ошибку, если попытаться отправить время, выходящее за заданные границы, или оставить поле времени пустым.

Рассмотрим пример: здесь мы задали минимальное и максимальное время, а также сделали поле обязательным:

<form>
  <div>
    <label for="appointment-time">
      Choose an appointment time (opening hours 12:00 to 18:00):
    </label>
    <input
      id="appointment-time"
      type="time"
      name="appointment-time"
      min="12:00"
      max="18:00"
      required />
    <span class="validity"></span>
  </div>
  <div>
    <input type="submit" value="Submit form" />
  </div>
</form>

Если попытаться отправить форму с неполным временем (или временем, выходящим за заданные границы), браузер покажет ошибку. Попробуйте поэкспериментировать с примером:

Техническая сводка

Спецификации

Совместимость с браузерами

См. также

• <input type="date">
• <input type="datetime-local">
• <input type="week">
• <input type="month">
• Универсальный элемент <input> и интерфейс для работы с ним — HTMLInputElement
• Форматы даты и времени в HTML
• Руководство по выбору даты и времени