<input type="date"> значение атрибута HTML

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

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

Попробуйте

<label for="start">Start date:</label>

<input
  type="date"
  id="start"
  name="trip-start"
  value="2018-07-22"
  min="2018-01-01"
  max="2018-12-31" />

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

input,
label {
  margin: 0.4rem 0;
}

Значение

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

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

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

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

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, общих для всех элементов <input>, элемент ввода date поддерживает следующие атрибуты:

max

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

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

min

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

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

step

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

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

Строковое значение any означает, что шаг не задан и допустимо любое значение (с учётом других ограничений, таких как min и max). Фактически для полей ввода date оно действует так же, как 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 можно задать количество пропускаемых дней при каждом увеличении даты (например, чтобы можно было выбирать только субботы).

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

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

Проверка данных

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

Если использовать 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

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

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

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

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

Результат

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

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

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

См. также

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