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.
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):
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.
Hi Massimo, Great article! Do we have a solution for cross-browser multi-date datepickers? http://eternicode.github.io/bootstrap-datepicker/ does have a multiple date option but I don’t think it’s very good in mobile.
Ops, I’ve misunderstood your request.
Sincerely, I have never used that feature, and I think it could lead to many problems both about usability and on “process” (management, db storing and querying, etc).
Anyway, it could be possible to replicate it with jQuery UI.
bye
Hi Massimo, could you help me understand what we meant by saying that it could lead to many problems both about usability and on"process"? What if we really are required to choose certain dates? Bootstrap-datepicker has this option and we can retrieve the chosen dates via getDates() but I was just wondering if you have other options. Thank you for your input!
Hi @massimo_cassandro ! I am struggling to find a working jscript solution for a datepicker (no time) that allows parsing a YYYYMMDD string date to show it in a human readable form and sends it back to the form (server) as a YYYYMMDD in other words I need to have two formats: One to store and one to display. Flatpickr seemed good, but has some issues … Do you know which is the best of them that is compatible with bootstrap? Thanks!