CODEWITHSUNDEEP
javascripttwitter-bootstrapdatepickertimepicker
Runar Halse
Runar Halse

Reputation: 3558

Calendar/date and time picker for Twitter bootstrap

I'm currently working on some date and time pickers in a twitter bootstrap project. I always find the calendar stuff a pain in the ass, hence this question.

There are tons of solutions out there for getting a working calendar, html5 date input, jquery-ui, pt-BR and the bootstrap datepicker to mention some. All of these have their pros and cons. The html5 solution might be the best since it depends on the browsers implementation which often is built to fit the device screen size. But this is not implemented in many browsers yet and is of course not supported in older version anyways. Not all of the above have time pickers in them, which would require an extra input for time with some kind of mask or something...

My project has been designed to be easy to use on a mobile phone, and scales well to fit small screens. With this is mind, a pop-up calendar might not be the best solution. However, cannot find any solutions that does not use a pop-up...

My aim with this question is simply to help me and others to find a good solid way to implement date and time pickers in a web page designed for all screens. Does anyone have any experience with any of the above, or some other solutions?

Upvotes: 3

Views: 9895

Answers (1)

eterps
eterps

Reputation: 14208

Why not use the HTML5 date input by default, and fall back to the Bootstrap datepicker or jQueryUI datepicker for IE8 and below. Simply use feature detection to decide which option should be used.

Code to detect if input type 'date' is supported:

var i = document.createElement("input");
i.setAttribute("type", "date");
return i.type !== "text";

or use the Modernizr library:

if (!Modernizr.inputtypes.date) {
  // no native support for <input type="date"> :(
}

You can put either of these into your own function:

function dateTypeIsSupported() {
  // do one of the above methods and return true or false
}

Then initialize your date field. Just add type="date" if HTML5 is supported, or attach a datepicker plugin if not:

<html>
  <input id='myDateField' />
</html>

<script>
  if ( dateTypeIsSupported() ) {
      // HTML5 is a go!
      document.getElementById('myDateField').type = 'date';
  } else {
      // No HTML5. Use jQueryUI datepicker instead.
      $('#myDateField').datepicker();
  }
</script>

References:

Upvotes: 4

Related Questions