jQuery datepicker widget with drop downs

A simple approach to a date selector drop downs working with jQuery’s datepicker. This uses three selects to get the month, day and year.

Example

The first step is the html.

<div><input id="a"
  style="position: absolute; z-index: -1;"
  type="text" />
<select id="a_month">
<option value="">Month</option>
<option value="1">Jan</option>
...
</select>
<select id="a_day">
<option value="">Day</option>
<option value="1">1</option>
...
</select>
<select id="a_year">
<option value="">Year</option>
</select>
<a href="javascript:showDatepicker('a')">
  <img img="calendar.png">
</a>
</div>

I’ve left the year drop down with no years in it since I’ll auto populate it using javascript when the page is loaded.

Note the div tag around everything and that I’ve put a text input first which wont be seen (it’s z-index hides it under the current layer). The position style means that the selects will lie on top of it.

Also the id of the text input is the same as the beginning of each select. This allows me to have multiple select groups and use the same javascript functions for display and callback.

The date picker is intended to be attached to an input or a div. If it’s attached to a div then it will replace the div with a date selector which would not be ideal here.

So we are going to attach our datepicker to the hidden input. In this case the datepicker will be overlayed on the page and should line up with the bottom of the input (which should be where the bottom of the selects are).

First use the ready event on the document to set the drop downs to todays date, and populate the year with last year through to next year.

$(document).ready(function() {
  //
  // Get today's date
  //
  var d = new Date();

  //
  // Set month drop down to this month (NB getMonth is 0 based so
  // we need to add one to the return value)
  //
  $('#a_month').val(d.getMonth()+1);

  //
  // Set day drop down to today's date.
  //
  $('#a_day').val(d.getDate());

  //
  // Get the year drop down and populate it with
  // last year, this year and next year
  // so we have some choices.
  //
  var y = $('#a_year').get(0);
  for (i = d.getFullYear()-1; i < d.getFullYear()+2; i++)
    y.options[y.options.length] = new Option(i, i);

  //
  // set selected year
  //
  $('#a_year').val(d.getFullYear())

  //
  // next initialise the datepicker, setting up min and max dates that
  // correspond to the date range we can select using the drop downs.
  //
  var minDate = new Date(y.options[1].value, 0, 1);
  var maxDate = new Date(y.options[y.options.length-1].value, 11, 31);
  $('#a').datepicker({dateFormat: 'd/m/yy',
      minDate: minDate,
      maxDate: maxDate,
      onSelect: setDate});
});

Next the function which will display the datepicker

function showDatepicker(id)
{
  //
  // Set the text input to the selected date in the drop downs
  // in the format we set for the datepicker.
  //
  $('#' + id).val($('#' + id + '_day').val() + '/' +
    $('#' + id + '_month').val() + '/' +
    $('#' + id + '_year').val());

  //
  // Display the date picker!
  //
  $('#' + id).datepicker('show');
}

And finally the callback

function setDate(text, control)
{
  //
  // Text is the value selected by the user in the form d/m/yyyy
  // Control is the html input element, so we can use
  //the id value to select the drop downs.
  //
  var dt = text.split('/');
  $('#' + control.id + '_day').val(dt[0]);
  $('#' + control.id + '_month').val(dt[1]);
  $('#' + control.id + '_year').val(dt[2]);
}

And that’s it. If you wanted to remove the limits on years you can not set the maxDate and minDate options. You would need to add options to the year select in the callback setDate to display the user’s selection.

Related posts:

• jQuery UI – Datepicker Demos & Documentation
• Neat extension to Datepicker
• jQuery UI Datepicker and z-Index

Tags: datepicker, jqueryui

This entry was posted on Thursday, May 21st, 2009 at 8:36 pm and is filed under jQuery. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.