Self Made Cross-Browser Datepickers in a flash!

In this quick tip, I’ll show you how to use the new HTML5 date input, and then grant a fallback jQuery UI solution for the browsers which don’t yet help this new input type.

Prefer a Video Tutorial?

Subscribe to our YouTube and Blip.tv channels to watch more screencasts.

Written Tutorial

We’ve all been here. You’ve made a form, and now you need the user to enter a date. But how do you control what format they enter the date in? Wouldn’t it be simpler if we could use a calendar control, or a datepicker? Absolutely! Unfortunately, though, only a couple browsers help the new HTML5 date input type. That’s okay though, we’ll use jQuery UI to grant a fallback!

Step one – The Native Solution

Let’s first plot for the future, and assume that the user is working in a modern browser that supports a datepicker.

At the time of this writing, only Webkit and Opera help this input type. In Firefox and Internet Surveyor, the browser will default to a simple textbox — not ideal!

Let’s use jQuery UI to compensate.

Step two – Download jQuery UI

The jQuery UI datepicker tool works wonderfully, and is a cinch to “install.” First, we download a customized version of jQuery UI, Visit the download page, and only check the “Core” and “Datepicker” items. Leave everything else unchecked.

Click download, and you’ll receive a zip containing the necessary files. Transfer over the jQuery UI file as well as the CSS directory to your project.

Step three – Integration

With jQuery UI imported into our directory tree, we next need to include the necessary files – specifically the CSS and JavaScript files.

Notice how we’ve included our custom jQuery UI stylesheet, the jQuery library – currently at version one.six – and the customized jQuery UI script, which I’ve renamed to jquery-ui.js.

Step four – The datepicker Method

Our base is set; now we need to query the DOM for the desired input constituent, and call the datepicker() method on it.

These few characters lonely will do the trick. If we now view the page in Firefox and click on the input constituent, you’ll see the datepicker in effect.

Step five – Providing the Fallback

What we have here works, but here’s one problem. If we return to an well ahead browser like Chrome, we’re now on dual duty. Both the native and fallback datepickers are in effect, simultaneously. We need a way to specify that, if the browser supports the date input type, don’t do anything. That’s simple!

In a real-planet project, you’d likely abstract away this testing code to its own method, or use Modernizr, but this will do the trick for testing purposes.

In the code higher than, we first start an input constituent, and then attempt to set its type attribute equal to date. Now if the browser fails at doing so — meaning that it doesn’t know what the date type is — we can then assume that it’s an older browser, and grant the jQuery UI fallback instead. Simple!

Step six – Datepicker Options

The datepicker tool comes with a variety of overrides; you can review the full list here.

Let’s examine a couple together. What if want to specify a specific date format. Rather than Y/M/D, we’d rather use Y-M-D. To do so, we use the dateFormat property.

$(‘#date’).datepicker({
dateFormat: ‘yy-mm-dd’
});

Well that was simple. Next, let’s say that we only want the user to be able to select a date between now and four days from now. This is a cinch when we use the maxDate selection. one handy-dandy figure is that we can use relation terms, such as +four, for four days from now.

$(‘#date’).datepicker({
maxDate: +four
});

We’re only scratching the surface here, but this must get you started! Cross-browser datepickers within minutes!

Tags: guides how-to html5 JavaScript & AJAX jQuery ui nettuts tips Tutorials tuts videos word press wordpress wp