Question

I’m trying to connect jQuery UI's datepicker with a select list.

I have found one explanation on jQuery’s Forum (
forum.jquery.com/topic/jquery-ui-datepicker-with-select-lists), but I can’t get it working.

There are input and select list both declared:

<select id="selectMonth"><option value="01">Jan</option><option value="02">Feb</option>
          <option value="03">Mar</option><option value="04">Apr</option>...</select>

<select id="selectDay"><option value="01">1</option><option value="02">2</option>
          <option value="03">3</option><option value="04">4</option>...</select>

<select id="selectYear"><option value="2012">2012</option><option value="2013">2013</option>
          <option value="2014">2014</option>...</select>

<p>Date: <input type="text" id="selectedDatepicker" /></p>

This is the script:

$(function() {
        $('#selectedDatepicker').datepicker({
    beforeShow: readSelected, onSelect: updateSelected,
    minDate: new Date(2012, 1 - 1, 1), maxDate: new Date(2014, 12 - 1, 31),
    showOn: 'both', buttonImageOnly: true, buttonImage: 'img/calendar.gif'});

// Prepare to show a date picker linked to three select controls
function readSelected() {
    $('#selectedDatepicker').val($('#selectMonth').val() + '/' +
        $('#selectDay').val() + '/' + $('#selectYear').val());
    return {};
}

// Update three select controls to match a date picker selection
function updateSelected(date) {
    $('#selectMonth').val(date.substring(0, 2));
    $('#selectDay').val(date.substring(3, 5));
    $('#selectYear').val(date.substring(6, 10));
}
    });

And here is the fiddle: http://jsfiddle.net/xKXZm/

They are not connected properly, the only “connected behaviour” is that when you click on the input button, it picks up the value of the select list. On the other hand, the select list never picks up the value of the input nor will the input pick up the value of the select list until you click on it.

Answer 1

For the date picker input to reflect the changes in the selects, you can bind the selects’ change event to readSelected

Check this demo: http://jsfiddle.net/xKXZm/5/

Note that you have listed only 4 days in your day select box. So day selection beyond 4 in the datePicker will not show up in the select box.