1. "Вступление"
  2. "Вход"
  3. "Пример"
  4. "Резюме"

вступление

В какой-то момент вам, скорее всего, придется запрашивать у пользователей даты. Введите дату ввода.

У них была смешанная поддержка браузеров, в основном из-за Safari. Тем не менее, он недавно вошел в техническую предварительную версию в Safari, вы можете увидеть полную поддержку браузера здесь. Так что скоро мы сможем использовать его во всех браузерах!

Вход

Поскольку это входные данные, все, что нужно, это атрибут type="date". Значение всегда имеет формат yyyy-mm-dd.

Вещи, на которые следует обратить внимание для атрибутов min, max и step на входе, имеют смешанную поддержку. Либо делайте это проще, либо используйте полифилл.

Лично я предпочитаю, чтобы все было просто и чтобы мы проверяли данные на стороне сервера при получении ввода. Что мы должны делать в любом случае!

Существует также дата и время, например. type="datetime-local" для записи даты и времени, однако это хуже поддерживается браузерами.

Если вы используете этот ввод в форме, ознакомьтесь с моим предыдущим сообщением в блоге, где приведены советы по отправке формы.

Пример

Заткнись и покажи мне код.

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

Если вы хотите увидеть более стильную версию, вы можете увидеть красиво оформленный ввод в Примерах в моем предыдущем посте в блоге.

Резюме

Таким образом, вы можете использовать то, что дают вам браузеры, для сбора дат! Как и в случае со всеми нативными элементами HTML, это означает, что клиенту отправляется меньше байтов. Это также означает, что доступность будет обеспечиваться браузерами, которые обычно работают лучше всего.

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

Ссылку на элемент можно найти здесь.

Удачного строительства!