0

jQuery UI's datepicker選択リストに接続しようとしています。

jQuery のフォーラム ( forum.jquery.com/topic/jquery-ui-datepicker-with-select-lists ) で 1 つの説明を見つけましたが、うまくいきません。

入力リストと選択リストの両方が宣言されています。

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

それらは適切に接続されていません。唯一の「接続された動作」は、入力ボタンをクリックすると、選択リストの値が取得されることです。一方、選択リストは入力の値を取得することはなく、クリックするまで入力が選択リストの値を取得することもありません。

4

1 に答える 1

2

選択の変更を反映する日付ピッカー入力の場合、選択の変更イベントをにバインドできます。readSelected

このデモを確認してください：http ：//jsfiddle.net/xKXZm/5/

1日の選択ボックスに4日しかリストされていないことに注意してください。したがって、datePickerで4を超える日の選択は、選択ボックスに表示されません。

于 2012-10-27T10:56:15.903 に答える