<input type="datetime-local"> значение атрибута

Элементы <input> типа datetime-local создают элементы управления, с помощью которых пользователь может легко указать дату и время, включая год, месяц и день, а также часы и минуты.

Попробуйте

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

<input
  type="datetime-local"
  id="meeting-time"
  name="meeting-time"
  value="2018-06-12T19:30"
  min="2018-06-07T00:00"
  max="2018-06-14T00:00" />

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

input,
label {
  margin: 0.4rem 0;
}

Внешний вид элемента управления в целом различается в разных браузерах. Элемент предназначен для представления локальных даты и времени, а не обязательно локальных даты и времени пользователя. Иными словами, поле ввода допускает любую допустимую комбинацию года, месяца, дня, часа и минуты, даже если такая комбинация недопустима в местном часовом поясе пользователя (например, время в течение часового промежутка, пропущенного при переходе на летнее время).

Значение

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

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

<label for="party">Enter a date and time for your party booking:</label>
<input
  id="party"
  type="datetime-local"
  name="party-date"
  value="2017-06-01T08:30" />

Следует отметить, что отображаемые форматы даты и времени отличаются от фактического значения value: отображаемые дата и время форматируются согласно языковым настройкам пользователя, предоставляемым его операционной системой, тогда как value даты и времени всегда форматируется YYYY-MM-DDTHH:mm. Например, при отправке приведённого выше значения на сервер оно будет выглядеть как party-date=2024-06-01T08:30.

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

const dateControl = document.querySelector('input[type="datetime-local"]');
dateControl.value = "2017-06-01T08:30";

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

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

max

Самые поздние дата и время, которые можно указать. Если значение value, введённое в элемент, позже этой временной метки, проверка ограничений для элемента завершится неудачно. Если значение атрибута max не является допустимой строкой в формате YYYY-MM-DDTHH:mm, у элемента нет максимального значения.

Это значение должно задавать дату, которая наступает не раньше даты, указанной атрибутом min.

min

Самые ранние дата и время, которые можно указать; временные метки, предшествующие этому значению, приведут к неудачной проверке ограничений элемента. Если значение атрибута min не является допустимой строкой в формате YYYY-MM-DDTHH:mm, у элемента нет минимального значения.

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

step

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

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

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

Использование полей ввода datetime-local

Поля ввода даты и времени удобны для разработчиков: они предоставляют простой интерфейс для выбора даты и времени и нормализуют формат данных, отправляемых на сервер, независимо от языковых настроек пользователя. Однако важно учитывать потребности пользователей. Не требуйте от них вводить данные, которые не нужны для работы вашего приложения.

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

<input type="datetime-local"> не поддерживает атрибуты управления размером элемента управления формы, например size. Чтобы изменить размер этих элементов, придётся использовать CSS.

Настройка часовых поясов

Тип поля ввода datetime-local не позволяет задать часовой пояс и/или языковые настройки для элемента управления датой и временем. Такая возможность была у типа поля ввода datetime, но теперь этот тип устарел и исключён из спецификации. Основными причинами его удаления стали отсутствие поддержки в браузерах и проблемы с пользовательским интерфейсом и опытом взаимодействия. Проще использовать один или несколько элементов управления для задания даты и времени, а языковые настройки задавать отдельно.

Например, если вы создаёте систему, в которой пользователь, скорее всего, уже вошёл в систему и его языковые настройки уже заданы, можно передать часовой пояс через поле ввода типа hidden. Например:

<input type="hidden" id="timezone" name="timezone" value="-08:00" />

С другой стороны, если пользователю нужно разрешить указывать часовой пояс вместе с датой и временем, можно добавить элемент <select>, чтобы пользователь мог выбрать нужный часовой пояс, указав местоположение из списка:

<select name="timezone" id="timezone">
  <option value="Pacific/Kwajalein">Eniwetok, Kwajalein</option>
  <option value="Pacific/Midway">Midway Island, Samoa</option>
  <option value="Pacific/Honolulu">Hawaii</option>
  <option value="Pacific/Marquesas">Taiohae</option>
  <!-- and so on -->
</select>

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

Проверка

По умолчанию <input type="datetime-local"> не проверяет введённые значения. Реализации пользовательского интерфейса обычно не позволяют вводить данные, не являющиеся датой и временем, — это удобно, — но пользователь всё же может оставить поле пустым и отправить форму или указать недопустимую дату и/или время (например, 32 апреля).

Атрибуты min и max позволяют ограничить доступный диапазон дат (см. раздел Установка максимальных и минимальных дат), а атрибут required позволяет сделать ввод даты и времени обязательным. В результате браузеры покажут ошибку, если попытаться отправить дату за пределами заданного диапазона или оставить поле даты пустым.

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

<form>
  <div>
    <label for="party">
      Choose your preferred party date and time (required, June 1st 8.30am to
      June 30th 4.30pm):
    </label>
    <input
      id="party"
      type="datetime-local"
      name="party-date"
      min="2017-06-01T08:30"
      max="2017-06-30T16:30"
      required />
    <span class="validity"></span>
  </div>
  <div>
    <input type="submit" value="Book party!" />
  </div>
</form>

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

Ниже приведён CSS, использованный в примере. Здесь мы применяем CSS-селекторы :valid и :invalid, чтобы оформлять поле ввода в зависимости от того, допустимо ли его текущее значение. Значки размещены в элементе <span> рядом с полем ввода.

div {
  margin-bottom: 10px;
  display: flex;
  align-items: center;
}

label {
  display: inline-block;
  width: 300px;
}

input:invalid + span::after {
  content: "✖";
  padding-left: 5px;
}

input:valid + span::after {
  content: "✓";
  padding-left: 5px;
}

Примеры

Основные способы использования datetime-local

Самый простой способ использования <input type="datetime-local"> — это сочетание простых элементов <input> и <label>, как показано ниже:

<form>
  <label for="party">Enter a date and time for your party booking:</label>
  <input id="party" type="datetime-local" name="party-date" />
</form>

Установка максимальных и минимальных дат и времени

С помощью атрибутов min и max можно ограничить даты и время, которые пользователь может выбрать. В следующем примере мы задаём минимальную дату и время 2025-06-01T08:30 и максимальную дату и время 2025-06-30T16:30:

<form>
  <label for="party">Enter a date and time for your party booking:</label>
  <input
    id="party"
    type="datetime-local"
    name="party-date"
    min="2025-06-01T08:30"
    max="2025-06-30T16:30" />
</form>

Можно выбрать только дни июня 2025 года. В зависимости от используемого браузера время за пределами указанных значений может быть недоступно для выбора. В других браузерах можно выбрать недопустимые даты и время, но они будут соответствовать селекторам :invalid и :out-of-range, а проверка завершится неудачно.

В некоторых браузерах (Safari) средство выбора даты позволяет выбрать любую дату, но после выбора значение будет ограничено допустимым диапазоном.

Допустимый диапазон включал все значения времени между min и max; время суток ограничено только для первой и последней даты диапазона.

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

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

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

См. также

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