Question

I have 6 different input fields. Each of them are grouped in pairs.

Here they are:

<input name="fecha-in" type="text" id="from" size="40" height="25" class="date" />
<input name="fecha-fin" type="text" id="to" size="40" height="25" class="date" />
<input name="tfecha-in" type="text" id="from1" size="40" height="25" class="date" />
<input name="tfecha-fin" type="text" id="to1" size="40" height="25" class="date" />
<input name="bfecha-in" type="text" id="from2" size="40" height="25" class="date" />
<input name="bfecha-fin" type="text" id="to2" size="40" height="25" class="date" />

And on these six I need to add the jQuery datepicker with date range. I can get it to work on one pair but I have no idea how to add this same code to all 3 pairs. Any help would be greatly appreciated.

Here is my jQuery:

$(function() {
    $( "#from" ).datepicker({
        defaultDate: "+1w",
        changeMonth: true,
        numberOfMonths: 3,
        onClose: function( selectedDate ) {
            $( "#to" ).datepicker( "option", "minDate", selectedDate );
        }
    });

    $( "#to" ).datepicker({
        defaultDate: "+1w",
        changeMonth: true,
        numberOfMonths: 3,
        onClose: function( selectedDate ) {
            $( "#from" ).datepicker( "option", "maxDate", selectedDate );
        }
    });
});

Thank you to anyone who can point me in the correct direction!

Answer 1

Here’s live demo:
http://jsfiddle.net/MMMQn/1/

Basic on your HTML, I’m iterating over inputs with class date

jQuery(".date").each(function(index, value) {
    ...    
} 

Then I’m deciding which pair is now (for the first one there’s no additional ID identifier, for the rest it goes up):

var inputId = (index === 0) ? "" : index.toString();

And at last, I’m adding this inputId string to jQuery selectors and binding your provided code.