Bartram's Bits

Monday, March 16, 2009

jQuery DatePicker w/Multiple Date Fields

I needed a replacement Datepicker tool for a legacy application so I headed over to jQuery.com to see what all the excitement was about. I ran through a couple tuturials starting with How jQuery Works by John Resig where I learned about the ready event, basic syntax, and chainability. Next, I jumped over to the jQuery UI Download section to grab a copy of the Datepicker widget.

I needed to be able to have several datepicker tools on the same page, so I used the .filter() to apply the widget to all input fields with a class of datepicker. I also wanted to give the user the ability to quickly pick from other months and even years, so I set changeMonth and changeYear to true. And finally, the users of my legacy app are expecting a calendar icon to click, so I duplicated that functionality with buttonImage and buttonImageOnly.

Demonstration

<html>
<head>
 <!-- jQuery JS Includes -->
 <script type="text/javascript" src="jquery/jquery-1.3.2.js"></script>
 <script type="text/javascript" src="jquery/ui/ui.core.js"></script>
 <script type="text/javascript" src="jquery/ui/ui.datepicker.js"></script>
 
 <!-- jQuery CSS Includes -->
 <link type="text/css" href="jquery/themes/base/ui.core.css" rel="stylesheet" />
 <link type="text/css" href="jquery/themes/base/ui.datepicker.css" rel="stylesheet" />
 <link type="text/css" href="jquery/themes/base/ui.theme.css" rel="stylesheet" />
 
 <!-- Setup Datepicker -->
 <script type="text/javascript"><!--
  $(function() {
   $('input').filter('.datepicker').datepicker({
    changeMonth: true,
    changeYear: true,
    showOn: 'button',
    buttonImage: 'jquery/images/calendar.gif',
    buttonImageOnly: true
   });
  });
 --></script>
</head>
<body>

 <!-- Each input field needs a unique id, but all need to be datepicker -->
 <p>Date 1: <input id="one" class="datepicker" type="text" readonly="true"></p>
 <p>Date 2: <input id="two" class="datepicker" type="text" readonly="true"></p>
 <p>Date 3: <input id="three" class="datepicker" type="text" readonly="true"></p>

</body>
</html>

posted by Ed Bartram at 8:56 PM

3 Comments:

  • instead of

    $('input').filter('.datepicker').datepicker( ...

    you can simply use

    $('input.datepicker').datepicker( ...

    By Blogger Russ, At 8:19 AM  

  • Fantastic! I find the jQuery documentation short on clear focused examples, and this post really helped me.

    µ

    By Blogger mark, At 7:54 PM  

  • Somehow I missed notification of both of your comments. Thanks for the alternative syntax Russ and thanks for the kind words Mark.

    By Blogger Ed Bartram, At 11:00 AM  

Post a Comment



<< Home