0

いくつかのオプションを含むドロップダウンがあり、選択した内容に基づいて、特定の日付範囲を設定するには 2 つの日付ピッカー (開始日と終了日) が必要です。以下の例では、オプション 1 または 3 が選択されている場合、終了日は将来の任意の日付にすることができます。オプション 2 を選択した場合、日付範囲は 30 日間にする必要があります。

以下の jsFiddle では、どちらのオプションを最初に選択しても、両方の日付ピッカーが正常に機能します。私の問題は、最初にオプション 1 または 3 を選択してからオプション 2 を選択した場合、日付範囲が 30 日間に変更されないことです。それをフリップ フロップし、最初にオプション 2 を選択すると、最初は正常に動作しますが、ドロップダウンをオプション 1 または 3 に変更すると、オプション 2 がまだ選択されているかのように 30 日の日付範囲が保持されます。

選択内容に基づいて正しくなるように、選択が行われるたびに日付範囲をリセットするにはどうすればよいですか?

この jsFiddle は、現在どのように機能しているかを示しています: http://jsfiddle.net/p3J28/

そして、これがjsFiddleからコピー/貼り付けされたコードです。

<div>
    <label>Select an Option:</label>
    <select id="select1">
        <option value="" disabled="disabled" selected="selected">Select an option</option>
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
        <option value="3">Option 3</option>
    </select>
</div>
<br /><br />
<div>
    <label>Start Date:</label>
    <input type="text" id="startdatepicker" />
    <br /><br />
    <label>End Date:</label>
    <input type="text" id="enddatepicker" />
</div>

<script>
$('#select1').change(function() {
    $('#startdatepicker, #enddatepicker').val("");
    if ($('#select1').val() == '2') {
        $('#startdatepicker, #enddatepicker').datepicker({
            showButtonPanel: true,
            closeText: 'Clear',
            dateFormat: "mm/dd/yy",
            onSelect: function(selected) {
                if (this.id == 'startdatepicker') {
                    var dateMin = $(this).datepicker('getDate');
                    var dateMax = $(this).datepicker('getDate');
                    dateMax.setDate(dateMin.getDate() + 30);
                    $('#enddatepicker').datepicker('option', 
                        { minDate: dateMin, maxDate: dateMax });
                } else if (this.id == 'enddatepicker') {
                    var dateMin = $(this).datepicker('getDate');
                    var dateMax = $(this).datepicker('getDate');
                    dateMin.setDate(dateMax.getDate() - 30);
                    $('#startdatepicker').datepicker('option', 
                        { minDate: dateMin, maxDate: dateMax });
                }
            }
        });
    } else {
        $('#startdatepicker, #enddatepicker').datepicker({
            showButtonPanel: true,
            closeText: 'Clear',
            dateFormat: "mm/dd/yy",
            onSelect: function(selected) {
                if (this.id == 'startdatepicker') {
                    $('#enddatepicker').datepicker('option', 
                        'minDate', selected);
                } else if (this.id == 'enddatepicker') {
                    $('#startdatepicker').datepicker('option', 
                        'maxDate', selected);
                }
            }
        });
    }
});
</script>

また、これを行うためのはるかに簡単でより良い方法があると確信しているので、どんな提案も大歓迎です。

更新された jsFiddle http://jsfiddle.net/6AKrg/

私は少し進歩することができましたが、まだ正しく機能していません。私の問題は、オプション 2 が選択された後にのみ日付範囲がリセットされないことです。最初にオプション 1 またはオプション 3 のいずれかを選択し、次にオプション 2 を選択すると日付範囲が適切に調整された場合、日付範囲は正しくなります。オプション 2 を選択した後、いずれかのオプション 1 に切り替えても、日付範囲はリセットされません。またはオプション 3. アイデアはありますか?

4

2 に答える 2

0

変更の最後に更新 ( http://api.jqueryui.com/datepicker/#method-refresh ) すると、うまくいくはずですhttp://jsfiddle.net/p3J28/1/

$('#select1').change(function() {
    $('#startdatepicker, #enddatepicker').val("");
    if ($('#select1').val() == '2') {
        $('#startdatepicker, #enddatepicker').datepicker({
            showButtonPanel: true,
            closeText: 'Clear',
            dateFormat: "mm/dd/yy",
            onSelect: function(selected) {
                if (this.id == 'startdatepicker') {
                    var dateMin = $(this).datepicker('getDate');
                    var dateMax = $(this).datepicker('getDate');
                    dateMax.setDate(dateMin.getDate() + 5);
                    $('#enddatepicker').datepicker('option', { minDate: dateMin, maxDate: dateMax });
                } else if (this.id == 'enddatepicker') {
                    var dateMin = $(this).datepicker('getDate');
                    var dateMax = $(this).datepicker('getDate');
                    dateMin.setDate(dateMax.getDate() - 5);
                    $('#startdatepicker').datepicker('option', { minDate: dateMin, maxDate: dateMax });
                }
            }
        });
    } else {
        $('#startdatepicker, #enddatepicker').datepicker({
            showButtonPanel: true,
            closeText: 'Clear',
            dateFormat: "mm/dd/yy",
            onSelect: function(selected) {
                if (this.id == 'startdatepicker') {
                    $('#enddatepicker').datepicker('option', 'minDate', selected);
                } else if (this.id == 'enddatepicker') {
                    $('#startdatepicker').datepicker('option', 'maxDate', selected);
                }
            }
        });

    }

    $('#startdatepicker, #enddatepicker').datepicker('refresh');
});
于 2013-06-19T18:14:45.000 に答える