(+84) 463.28.7979

Quick Tip: Create Cross-Browser Datepickers in Minutes


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.

  1. <!DOCTYPE html>
  2. <html lang=”en”>
  3. <head>
  4. <meta charset=”utf-8″>
  5. <title>Date Picker</title>
  6. </head>
  7. <body>
  8. <input type=”date” name=”date” id=”date” value=”” />
  9. </body>
  10. </html>

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.

  1. <!DOCTYPE html>
  2. <html lang=”en”>
  3. <head>
  4. <meta charset=”utf-8″>
  5. <title>Datepicker</title>
  6. <link href=”css/redmond/jquery-ui-1.8.13.custom.css” rel=”stylesheet” />
  7. </head>
  8. <body>
  9. <input type=”date” name=”date” id=”date” value=”” />
  10. <script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js”></script>
  11. <script src=”js/jquery-ui.js”></script>
  12. </body>
  13. </html>

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.

  1. <script src=”js/jquery-ui.js”></script>
  2. <script>
  3. $(‘#date’).datepicker();
  4. </script>

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!

  1. <!DOCTYPE html>
  2. <html lang=”en”>
  3. <head>
  4. <meta charset=”utf-8″>
  5. <title>Datepicker</title>
  6. <link href=”css/redmond/jquery-ui-1.8.13.custom.css” rel=”stylesheet” />
  7. </head>
  8. <body>
  9. <input type=”date” name=”date” id=”date” value=”” />
  10. <script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js”></script>
  11. <script src=”js/jquery-ui.js”></script>
  12. <script>
  13. (function() {
  14. var elem = document.createElement(‘input’);
  15. elem.setAttribute(‘type’, ‘date’);
  16. if ( elem.type === ‘text’ ) {
  17. $(‘#date’).datepicker();
  18. }
  19. })();
  20. </script>
  21. </body>
  22. </html>

“In a real-world project, you’d likely abstract away this testingcode 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.

  1. $(‘#date’).datepicker({
  2. maxDate: +4
  3. });

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

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>