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/2010' } ).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) { var selectedDate = new Date(selectedDate); $('#d option[value=' + selectedDate.getDate() + ']').attr('selected', 'selected'); $('#m option[value=' + (selectedDate.getMonth()+1) + ']').attr('selected', 'selected'); $('#y option[value=' + (selectedDate.getFullYear()) + ']').attr('selected', 'selected'); } // 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(); updateSelects(today.getTime()); // and update the datePicker to reflect it... $('#d').trigger('change'); });