How to collect date information using HTML Input!
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!
As it is an input all that is needed is
type="date" attribute. The value is always formatted
Things to watch out for
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.
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.
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.
Element reference can be found here.