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?
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?
Share Improve this question asked Mar 8, 2013 at 19:10 Runar HalseRunar Halse 3,55810 gold badges41 silver badges60 bronze badges1 Answer
Reset to default 4Why 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:
- http://diveinto.html5doctor./detect.html#input-types
- http://tjvantoll./2012/06/30/creating-a-native-html5-datepicker-with-a-fallback-to-jquery-ui/
- How can I tell if a browser supports <input type='date'>