<input type="datetime-local">

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

Интерфейс управления в целом варьируется в разных браузерах. В браузерах, не поддерживающих этот тип, он плавно переходит к обычным <input type="text"> элементам управления.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

В настоящее время неясно, что означает значение any для элементов step при использовании с элементами ввода 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="partydate"
      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;
}

Самое простое использование <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="partydate" />
</form>

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

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

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

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

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

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