Originally published at: http://www.sitepoint.com/finding-date-picker-input-solution-bootstrap/
My work often requires adding date inputs to forms. Since they are not yet supported by all browsers, I’m always looking for the best way to integrate them in my pages.
You can see the latest data on browser support for date inputs on Can I Use.
In addition to the basic
date-input field, there are other time-related field types:
datetimefields allow entering dates and times based on the UTC format.
datetime-localrepresents date and time with no time zone
monthrepresents the month and year
weekrepresents a week number and year
I’ve built a test page for all the above listed date input types, with some help from Modernizr, and I’ve tested it with many recent mobile and desktop browsers using Browserstack. For example, this is the result page as viewed in Chrome (red fields are unsupported ones):
You can test it directly in the demo here:
This test brings us the following information:
- No browser supports the
- Browsers that support
monthtoo, while the
weektype is not as well supported.
- All browsers seem to ignore the
langattribute. That is, browser input widgets always use system settings for date and time format, so it’s impossible to display an input widget with a language other than the native one.
Now we know that we have to handle not only
datetime support but also the date format (if we need it to be different from the system settings of the user) and UTC / local issues. Moreover, we need to take into account the difference between the displayed format and the returned one on form submit.