13

jQuery ui で日付ピッカーを作成しています。私がやろうとしているのは範囲を設定することです。最初の日付を選択すると、2 番目の日付が表示され、30 日のウィンドウが表示されます。私はこれを試しましたが、うまくいきません (ユーザーは開始日から 30 日ではなく、今日から 30 日を選択できます):

var pickDate;
$( "#datepickerEnd" ).hide();
$( "#datepickerStart" ).datepicker();
$( "#datepickerStart" ).change(function(){
    var pickDate = $( "#datepickerStart" ).val();
    $( "#datepickerEnd" ).datepicker({ minDate: pickDate, maxDate: +30 });
    $( "#datepickerEnd" ).show();
})

私が遭遇したもう1つの問題は、datepickerStartを変更すると、開始範囲が1回だけ設定されますが、変更するたびに設定されるわけではありません。新しい開始日を確定するには、ページを更新する必要があります。

4

3 に答える 3

35

こちらをご確認くださいjsfiddle。それはあなたの問題の実例です。

HTML

<input type="text" id="dt1">
<input type="text" id="dt2">

JS

$(document).ready(function () {
    $("#dt1").datepicker({
        dateFormat: "dd-M-yy",
        minDate: 0,
        onSelect: function () {
            var dt2 = $('#dt2');
            var startDate = $(this).datepicker('getDate');
            //add 30 days to selected date
            startDate.setDate(startDate.getDate() + 30);
            var minDate = $(this).datepicker('getDate');
            var dt2Date = dt2.datepicker('getDate');
            //difference in days. 86400 seconds in day, 1000 ms in second
            var dateDiff = (dt2Date - minDate)/(86400 * 1000);

            //dt2 not set or dt1 date is greater than dt2 date
            if (dt2Date == null || dateDiff < 0) {
                    dt2.datepicker('setDate', minDate);
            }
            //dt1 date is 30 days under dt2 date
            else if (dateDiff > 30){
                    dt2.datepicker('setDate', startDate);
            }
            //sets dt2 maxDate to the last day of 30 days window
            dt2.datepicker('option', 'maxDate', startDate);
            //first day which can be selected in dt2 is selected date in dt1
            dt2.datepicker('option', 'minDate', minDate);
        }
    });
    $('#dt2').datepicker({
        dateFormat: "dd-M-yy",
        minDate: 0
    });
});

soderslatt が既に述べたように、onSelectオプションを使用して日付を設定します。私が使用した他の方法は次のとおりです。

それらはすべて非常に自明であり、ドキュメントはそれらがどのように機能するかを理解するのに役立ちます。2 番目の日付ピッカーの日付を dt1 の日付 + 1 日に設定する場合は、次の行と同じようにします。

startDate.setDate(startDate.getDate() + 30);

もちろん、30 日ではなく 1 日を追加します。

于 2013-06-10T07:25:10.110 に答える