Quick Tip: Create Cross-Browser Datepickers in Minutes

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


Prefer a Video Tutorial?


Written Tutorial

We've all been there. You've created 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 easier if we could use a calendar control, or a datepicker? Absolutely! Unfortunately, though, only a couple browsers support the new HTML5 date input type. That's okay though, we'll use jQuery UI to provide a fallback!


Step 1 - The Native Solution

Let's first plan 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 support this input type. In Firefox and Internet Explorer, the browser will default to a simple textbox -- not ideal!

Browser Support

Let's use jQuery UI to compensate.


Step 2 - 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.

Downloads Page

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 3 - 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 1.6 - and the customized jQuery UI script, which I've renamed to jquery-ui.js.


Step 4 - The datepicker Method

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

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

Datepicker Control

Step 5 - Providing the Fallback

What we have here works, but there's one problem. If we return to an advanced browser like Chrome, we're now on double 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 easy!

In a real-world 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 above, we first create an input element, and then attempt to set its type attribute equal to date. Now if the browser fails at doing so -- meaning that it doesn't understand what the date type is -- we can then assume that it's an older browser, and provide the jQuery UI fallback instead. Simple!


Step 6 - Datepicker Options

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


Options

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.

Well that was easy. 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 option. One handy-dandy feature is that we can use relative terms, such as +4, for four days from now.

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

Tags:

Comments

Related Articles