<input type="time">

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

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

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

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

Вы также можете получить и установить значение времени в 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;
  },
  false,
);

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

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

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

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

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

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

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

Строковое значение any означает, что никакого шага нет, и любое значение разрешено (кроме других ограничений, таких как min и max).

Для полей ввода time значение step дано в секундах, с коэффициентом масштабирования 1000 (поскольку базовое числовое значение — в миллисекундах). Значение по умолчанию атрибута step равно 60, что указывает на 60 секунд (или 1 минуту, или 60 000 миллисекунд).

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

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

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

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

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

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

<form>
  <label for="appt-time">Choose an appointment 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">
    Choose an appointment time (opening hours 12:00 to 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, чтобы стилизовать поле ввода в зависимости от того, является ли текущее значение допустимым. Мы добавляем иконку в качестве генерируемого содержимого иконки на <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, диапазон допустимого времени будет охватывать полночь, чтобы создать допустимый диапазон времени. Эта функциональность не поддерживается другими типами полей ввода.

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="appt-time">
      Choose an appointment time (opening hours 12:00 to 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="Submit form" />
  </div>
</form>

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

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

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