Contents

1. Intro
2. Input
3. Example
4. Summary

Intro

You are more than likely going to have to ask your users for dates at some point.
Enter Date Inputs.

They've had mixed browser support, mainly because of Safari. However, it's recently entered Technical Preview on Safari, you can see full browser support here.
So, we can soon use it across all browsers!

Input

As it is an input all that is needed is type="date" attribute.
The value is always formatted yyyy-mm-dd.

Things to watch out for min, max and step attributes on the input have mixed support. Either keep it simple or use a polyfill.

My personal preference is to keep it simple and ensure we're validating on server side when receiving the input. Which we should be doing anyway!

There is also datetime e.g. type="datetime-local" to capture a date and time, however this has worse browser support.

If you are using this input in a form, check out my previous blog post for tips on submitting the form.

Example

Shut up and show me the code.

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

If you'd like to see a more styled version, you can see a nicely styled input on the Examples on my previous blog post.

Summary

In summary, you can use what browsers give you to collect dates!
As with all native HTML elements, it means less bytes shipped to the client.
It also means accessibility will be handled by the browsers which is normally best.

Soon it will be available across browsers once Safari releases the feature, which will be amazing!
We can then remove plenty of JavaScript from the front end as it will be natively supported.

Element reference can be found here.

Happy building!