<input type="date">

<input> элементы типа type="date" создают поля ввода, позволяющие пользователю ввести дату. Вид виджета выбора даты зависит от браузера и операционной системы. Значение нормализуется в формате yyyy-mm-dd.

Результат включает год, месяц и день, но не время. Типы ввода time и datetime-local поддерживают ввод времени и даты+времени.

Строка, представляющая введённую дату в поле ввода. Дата отформатирована в соответствии со форматом строк дат.

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

<input type="date" value="2017-06-01" />

Вы можете получить и установить значение даты в JavaScript с помощью HTMLInputElement value и valueAsNumber свойств. Например:

const dateControl = document.querySelector('input[type="date"]');
dateControl.value = "2017-06-01";
console.log(dateControl.value); // prints "2017-06-01"
console.log(dateControl.valueAsNumber); // prints 1496275200000, a JavaScript timestamp (ms)

Этот код находит первый элемент <input>, значение атрибута type которого равно date, и устанавливает его значение в 2017-06-01 (1 июня 2017 года). Затем он считывает это значение в строчном и числовом форматах.

Атрибуты, общие для всех элементов <input>, также применяются к полям ввода типа date, но могут не повлиять на его отображение. Например size и placeholder могут не сработать. Для полей ввода типа date доступны следующие дополнительные атрибуты.

Самая поздняя дата для приема. Если введённая в элемент value дата следует за ней, элемент не проходит валидацию. Если значение атрибута max не является допустимой строкой даты в формате yyyy-mm-dd, у элемента нет максимальной даты.

Если атрибуты max и min установлены, это значение должно быть строкой даты, позднее или равной значению в атрибуте min.

Самая ранняя дата для приема. Если введённая в элемент value дата предшествует ей, элемент не проходит валидацию. Если значение атрибута min не является допустимой строкой даты в формате yyyy-mm-dd, у элемента нет минимальной даты.

Если атрибуты max и min установлены, это значение должно быть строкой даты, раньше или равной значению в атрибуте max.

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

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

Для полей ввода типа date значение атрибута step задаётся в днях; и обрабатывается как число миллисекунд, равное 86 400 000 умноженное на значение step (основное числовое значение — в миллисекундах). Значение по умолчанию для атрибута step равно 1, что соответствует 1 дню.

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

В этом разделе мы рассмотрим использование <input type="date"> в базовом и более сложных случаях.

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

<form action="https://example.com">
  <label>
    Enter your birthday:
    <input type="date" name="bday" />
  </label>

  <p><button>Submit</button></p>
</form>

Этот HTML отправляет введённую дату под ключом bday на https://example.com — что приводит к URL-адресу, например, https://example.com/?bday=1955-06-08.

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

<form>
  <label>
    Choose your preferred party date:
    <input type="date" name="party" min="2017-04-01" max="2017-04-30" />
  </label>
</form>

Результат заключается в том, что можно выбрать только дни апреля 2017 года — месяц и год в текстовом поле будут недоступны, а даты, не относящиеся к апрелю 2017 года, не будут отображаться в виджете выбора даты.

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

Поля ввода даты не поддерживают атрибуты форматирования размера, такие как size. Используйте CSS для управления размером.

По умолчанию, поля ввода даты не проверяют введённое значение, кроме его формата. Интерфейсы, как правило, не позволяют вводить что-либо, что не является датой — что полезно.

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

Вы также можете использовать атрибут required для того, чтобы заполнение даты было обязательным — будет отображаться ошибка, если вы попытаетесь отправить пустое поле даты.

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

<form>
  <label>
    Choose your preferred party date (required, April 1st to 20th):
    <input
      type="date"
      name="party"
      min="2017-04-01"
      max="2017-04-20"
      required />
    <span class="validity"></span>
  </label>

  <p>
    <button>Submit</button>
  </p>
</form>

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

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

label {
  display: flex;
  align-items: center;
}

span::after {
  padding-left: 5px;
}

input:invalid + span::after {
  content: "✖";
}

input:valid + span::after {
  content: "✓";
}

В этом примере мы создаём выборщик даты, используя встроенный <input type="date"> выборщик.

HTML выглядит так:

<form>
  <div class="nativeDatePicker">
    <label for="bday">Enter your birthday:</label>
    <input type="date" id="bday" name="bday" />
    <span class="validity"></span>
  </div>
</form>

CSS выглядит так:

input:invalid + span::after {
  content: " ✖";
}

input:valid + span::after {
  content: " ✓";
}

• Элемент <input> общего назначения и интерфейс, используемый для его управления, HTMLInputElement
• Урок по выборщикам даты и времени
• Форматы дат и времени, используемые в HTML
• Совместимость свойств CSS