The following example displays how you can create a date picker and have the selected date parsed into seperate select elements. It also demonstrates how to update the selected date in the datePicker as the select elements are changed.
$(function()
{
// initialise the "Select date" link
$('#date-pick')
.datePicker(
// associate the link with a date picker
{
createButton:false,
startDate:'01/01/2005',
endDate:'31/12/2008'
}
).bind(
// when the link is clicked display the date picker
'click',
function()
{
updateSelects($(this).dpGetSelected()[0]);
$(this).dpDisplay();
return false;
}
).bind(
// when a date is selected update the SELECTs
'dateSelected',
function(e, selectedDate, $td, state)
{
updateSelects(selectedDate);
}
).bind(
'dpClosed',
function(e, selected)
{
updateSelects(selected[0]);
}
);
var updateSelects = function (selectedDate)
{
selectedDate = new Date(selectedDate);
var d = selectedDate.getDate();
var m = selectedDate.getMonth();
var y = selectedDate.getFullYear();
($('#d')[0]).selectedIndex = d - 1;
($('#m')[0]).selectedIndex = m;
($('#y')[0]).selectedIndex = y - 2005;
}
// listen for when the selects are changed and update the picker
$('#d, #m, #y')
.bind(
'change',
function()
{
var d = new Date(
$('#y').val(),
$('#m').val()-1,
$('#d').val()
);
$('#date-pick').dpSetSelected(d.asString());
}
);
// default the position of the selects to today
var today = new Date();
($('#d')[0]).selectedIndex = today.getDate() - 1;
($('#m')[0]).selectedIndex = today.getMonth();
($('#y')[0]).selectedIndex = today.getFullYear() - 2005;
// and update the datePicker to reflect it...
$('#d').trigger('change');
});