Question

I have two forms with 2 input boxes for inputing start date and end date, markup for this is:

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

I need to set minimum value for input boxes with end date when value in input boxes with start date is changes. When I set datepicker directly like this:

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

that works. But when I set datepicker in loop like this:

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();
}

that doesn’t work, if I select value in the “from1”, “minDate” is set only for “to2”. I would like to set “minDate” for “to1” when I change value in “from1”.
Any idea what is wrong? Thank you in advance

Answer 1

I don’t understand why would you set datepicker on a loop… Use a class instead and it’ll be easier. Also why would you have two forms?

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

And simply this in JS:

$(".from").datepicker({
    onSelect: function(selectedDate) {
         $(this).next()
                .datepicker("option", "minDate", selectedDate);
    }
})
// not sure you need this...
.next()
.datepicker();