By I am learning on

Hi,

How can I use a date pop-up calender to collect date input from my user? At present I'm using three drop-downs for Year-Month-Day. But a calender is an elegant solution.

Please guide.

Regards

⋅ Categories: Drupal 6.x

Comments

stevenc’s picture

stevenc commented

My favorite is the jQuery plugin Datepicker.

http://jqueryui.com/demos/datepicker/

Such a feature is implemented at the client (browser) level - it actually has nothing to do with Drupal itself. The datepicker just renders the correct value (example: "02/08/2011") into the field, which is then submitted as if the user had entered it manually.

If you are new to implementing jQuery plugins, the page at the URL above has a "getting started" link. You add this library to Drupal at the theme level.

---------------------------------
Steven Wright

Slalom

I am learning’s picture

I am learning commented

Thanks Steven,

I'll try it, although an example will be a great help if you could please provide.

Regards

stevenc’s picture

stevenc commented

First, you need to add the jQuery UI with datepicker library to your project, via normal Drupal methods.
http://jqueryui.com/download

Your page's HTML output should ultimately include something like in the head:

<script src="libs/jquery-ui.min.js" type="text/javascript"></script>
<link type="text/css" rel="stylesheet" media="all" href="libs/jquery-ui-css/jquery-ui.css" />

(Obviously the exact paths you use will be different)

Next, you need to add the datepicker setup using jQuery. In your page/theme JS file, add something like this:

$(document).ready(function() {
  var options = { 
    changeMonth: true,
    changeYear: true,
    showAnim: 'slideDown'
  }
  $(".date-picker").datepicker(options);
});

The class "date-picker" is an example - this may use any any valid jQuery selector to match the field you wish to add the calendar to.

Lastly, you can override the calendar CSS in your theme CSS file. Here is an example where I make the font size a bit smaller.

#ui-datepicker-div.ui-datepicker select.ui-datepicker-month,
#ui-datepicker-div.ui-datepicker select.ui-datepicker-year {
  font-size: 0.8em;
}

---------------------------------
Steven Wright

Slalom