Finding a Date Picker Input Solution for Bootstrap

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:

  • 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):

Date test

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 this article on SitePoint

What about the following suite? No Jquery required:
http://mgcrea.github.io/angular-strap/

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.

Kind Regards,
Daryll

Hi @DaryllDelfin, thank you.
You can create a range datepicker with jquery UI too: simply add this code to your script:

if(Modernizr.inputtypes.date) {
	$('#start_date_field').change(function () {
		$('#end_date_field').attr('min', $(this).val());
	});

	$('#end_date_field').change(function () {
		$('#start_date_field').attr('max', $(this).val());
	});


} else {
	$('#end_date_field').datepicker("option" , 'beforeShow',
		function() {
			return {minDate: $('#start_date_field').val()};
		}
	);

	$('#start_date_field').datepicker("option" , 'beforeShow',
		function() {
			return {maxDate: $('#end_date_field').val()};
		}
	);

}

You need both Modernizer and jQuery, just like in my article.
Bye

Hi Massimo, Thanks.
How about multi-date picker? Like specific dates and not date ranges?

Kind Regards,
Daryll

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 @DaryllDelfin, I think that a unique multidate field could have some issues:

  • You can’t use native date fields
  • The date sequence extends horizontally, and I think it might be tricky on small devices
  • It surely requires extra work on server side, for processing and validation

In my opinion, a sequence of standard fields could give better results

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!

Hi, my article describes just the solution your are looking for, take a look at it. Bye