0

開始日と終了日を入力するための2つの入力ボックスを持つ2つのフォームがあります。これのマークアップは、次のとおりです。

<form>
    <input type="text" id="from1" name="from1" />
    <input type="text" id="to1" name="to1" />
</form>
<form>
    <input type="text" id="from2" name="from2" />
    <input type="text" id="to2" name="to2" />
</form>

開始日の入力ボックスの値が変更された場合、終了日の入力ボックスの最小値を設定する必要があります。日付ピッカーを次のように直接設定すると、次のようになります。

$("#from1").datepicker({
    onSelect: function(selectedDate) {
         $("#to1").datepicker("option", "minDate", selectedDate);
    }
});
$("#to1").datepicker();

それは動作します。しかし、次のように日付ピッカーをループに設定すると、次のようになります。

for (var i = 1; i < 3; i++) {
    var input1 = "#from"+i;
    var input2 = "#to"+i;
    $(input1).datepicker({
        onSelect: function(selectedDate) {
             $(input2).datepicker("option", "minDate", selectedDate);
        }
    });
    $(input2).datepicker();
}

それは機能しません。「from1」で値を選択すると、「minDate」は「to2」にのみ設定されます。「from1」の値を変更するときに「to1」に「minDate」を設定したいのですが。何が悪いのか分かりますか？前もって感謝します

4

1 に答える 1

0

なぜループにdatepickerを設定するのかわかりません...代わりにクラスを使用すると簡単になります。また、なぜ2つのフォームがあるのでしょうか。

<form>
    <input type="text" id="from1" class="from" name="from1" />
    <input type="text" id="to1" class="to" name="to1" />
    <input type="text" id="from2" class="from" name="from2" />
    <input type="text" id="to2" class="to" name="to2" />
</form>

そして、JSではこれを単純に：

$(".from").datepicker({
    onSelect: function(selectedDate) {
         $(this).next()
                .datepicker("option", "minDate", selectedDate);
    }
})
// not sure you need this...
.next()
.datepicker();
于 2012-08-10T22:50:56.153 に答える