techfoobarのおかげで、同期された入力フィールドと選択リストを備えた日付ピッカーがあります。
しかし、日付の形式を「yy-mm-dd」に変更すると動作しなくなりました。選択リストを変更すると入力も変更されますが、日付ピッカーをクリックしても選択リストは更新されません。
スクリプトは次のとおりです。
$(function() {
        $('#selectedDatepicker').datepicker({
        dateFormat: "yy-mm-dd",
    beforeShow: readSelected, onSelect: updateSelected,
    minDate: new Date(2013, 1 - 1, 1), maxDate: new Date(2013, 06 - 1, 31),
    numberOfMonths: 3,
    showButtonPanel: true,
    showOn: 'both', buttonImageOnly: true, buttonImage: 'http://jqueryui.com/resources/demos/datepicker/images/calendar.gif'});
// Prepare to show a date picker linked to three select controls
function readSelected() {
    $('#selectedDatepicker').val($('#selectYear').val() + '-' +
        $('#selectDay').val());
    return {};
}
// Update three select controls to match a date picker selection
function updateSelected() {
    var date1 = $(this).val();
    console.log(date1.substring(3, 5));
    console.log(date1.substring(6, 10));
    $('#selectDay').val(date1.substring(3, 5));
    $('#selectYear').val(date1.substring(6, 10));
}
    $('select').change(readSelected);
    });
これはHTMLコードです:
<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="2013-01">January 2013</option>
<option value="2013-02">February 2013</option>
<option value="2013-03">March 2013</option>
<option value="2013-04">April 2013</option>
<option value="2013-05">May 2013</option>
<option value="2013-06">June 2013</option>
</select>
<p>Date: <input type="text" id="selectedDatepicker" /></p>
ここでフィドルを確認できます:
この問題はどこから来るのですか?両方のフィールドに同じフォーマットセットがあります。