如何鏈接jQuery UI日期選擇器功能與選擇列表

我試圖連接jQuery UI's datepicker與選擇列表。如何鏈接jQuery UI日期選擇器功能與選擇列表

我找到了jQuery論壇的一個解釋（ forum.jquery.com/topic/jquery-ui-datepicker-with-select-lists），但我無法得到它的工作。

有輸入和選擇列表都宣稱：

<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>

這是腳本：

$(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)); 
} 
    });

這裏是小提琴：http://jsfiddle.net/xKXZm/

他們沒有正確連接時，只有「連接行爲」是，當你點擊輸入按鈕時，它會選擇選擇列表的值。另一方面，選擇列表不會選取輸入的值，也不會輸入選擇列表的值，直到您點擊它爲止。

來源

2012-10-27 take2