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

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

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

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

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

В результате можно выбрать только дни в апреле 2017 года. Месяц и год в текстовом поле будут недоступны для редактирования, а даты за пределами апреля 2017 года нельзя будет выбрать в виджете выбора.

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

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

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

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

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

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

Вторая проблема является более серьезной; при поддержке ввода даты значение нормализуется до формата yyyy-mm-dd. Но при текстовом вводе браузер не распознает, в каком формате должна быть дата, и существует множество различных форматов, в которых люди пишут даты. Например:

Вторая проблема является более серьезной; при поддержке ввода даты значение нормализуется до формата yyyy-mm-dd. Но при текстовом вводе браузер не распознает, в каком формате должна быть дата, и существует множество различных форматов, в которых люди пишут даты. Например:

Один из способов обойти это - pattern атрибут для ввода даты. Даже если средство выбора даты не использует его, резервный текстовый ввод будет. Например, попробуйте просмотреть следующее в неподдерживающем браузере:

Если вы отправите его, вы увидите, что браузер отображает ошибку и выделяет ввод как недействительный, если ваша запись не соответствует шаблону ####-##-## (где #цифра от 0 до 9). Конечно, это не мешает людям вводить неверные даты или неверные форматы. Так что у нас все еще есть проблема.

На данный момент лучший способ работать с датами в формах в кросс-браузерном режиме — предоставить пользователю возможность вводить день, месяц и год в отдельных элементах управления или использовать библиотеку JavaScript.