Finding a Date Picker Input Solution for 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:

• datetime fields allow entering dates and times based on the UTC format.


• datetime-local represents date and time with no time zone


• time


• month represents the month and year


• week represents 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:

See the Pen Testing date picker display and values. by SitePoint (@SitePoint) on CodePen.

This test brings us the following information:

• No browser supports the datetime input type.


• Browsers that support datetime-local also support time and month too, while the week type is not as well supported.


• All browsers seem to ignore the lang attribute. 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 date or 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.

Continue reading %Finding a Date Picker Input Solution for Bootstrap%

by Massimo Cassandro via SitePoint