HTML5 is awesome. It gives us so many things that we previously had to do manually! Unfortunately, not all browsers support it yet.
Personally, I’m eager to use all the new features, but I don’t want to sacrifice browser support. For example, I don’t want to use jquery ui to render a date picker if a browser supports html5 <input type=”date”>.
Fortunately, you can check if a browser supports the HTML5 way, and use Jquery UI even if it doesn’t! I used Modernizr for this, and it’s quite awesome. As you can see, there are many many things it can detect, but for this particular instance, you can build a bundle with only “input types” (I might do a more extensive post on Modernizr later… hmmm).
First of all, build a Modernizr bundle with the options you want (or just “input types” like me) and download the resulting .js file. Assuming you already have jquery ui installed, your code should look like this
<html>
<head>
<title></title>
<!-- The real path to the jquery ui css... !-->
<link href="css/jquery-ui.css" rel="stylesheet" type="text/css" />
</head>
<body>
<input type="text" class="date" />
<!-- Path to jquery & jquery ui !-->
<script src="js/jquery.js"></script>
<script src="js/jquery-ui.js"></script>
<script>
$( ".date" ).datepicker();
</script>
</body>
</html>
Which will work fine, but I still prefer the native datepicker where available. This is where Modernizr comes in handy! First of all, load the Modernizr script as well.
<script src="js/modernizr.js"></script>
You can now use the date input type like you usually would:
<input type="date" />
As long as you also add this somewhere in your javascript code:
<script>
if (!Modernizr.inputtypes.date) {
$( "input[type=date]" ).datepicker();
}
</script>
That easy! Now if the date input type isn’t supported, all your <input type=”date”> will automatically use the jquery ui datepicker. Additionally, you will automatically have the native solution when these browsers start supporting it, without you having to change anything else in the future.
(altogether, the code should look like this):
<html>
<head>
<title></title>
<!-- The real path to the jquery ui css... !-->
<link href="css/jquery-ui.css" rel="stylesheet" type="text/css" />
</head>
<body>
<input type="date" />
<!-- Path to jquery & jquery ui !-->
<script src="js/jquery.js"></script>
<script src="js/jquery-ui.js"></script>
<script>
if (!Modernizr.inputtypes.date) {
$( "input[type=date]" ).datepicker();
}
</script>
</body>
</html>
Native datepicker in chrome:
Jquery ui datepicker in firefox:
That’s all for now! (Should I blog about modernizr more…? Let me know on twitter (@errietta) :p)
‘Till next time!