In una pagina web ho una sessantina di campi input text dove se vi si clicca sopra con il mouse compare una fienstra per selezionare la data, insomma, i classici "date range";

li richiamo a mano in questo modo:

codice:
<input type="text" id="dateRangeFrom1" />     
<input type="hidden" id="dateRangeTo1"  />


<input type="text" id="dateRangeFrom2" />     
<input type="hidden" id="dateRangeTo2"  />

<input type="text" id="dateRangeFrom3" />     
<input type="hidden" id="dateRangeTo3"  />

common.js
codice:

    




    // daterange1
    if ($('#dateRangeFrom1').length && $('#dateRangeTo1').length)
    {
        $( "#dateRangeFrom1" ).datepicker({
            defaultDate: "+1w",
            changeMonth: false,
            numberOfMonths: 2,
            onClose: function( selectedDate ) {
                $( "#dateRangeTo1" ).datepicker( "option", "minDate", selectedDate );
            }
        }).datepicker( "option", "maxDate", $('#dateRangeTo1').val() );


        $( "#dateRangeTo1" ).datepicker({
            defaultDate: "+1w",
            changeMonth: false,
            numberOfMonths: 2,
            onClose: function( selectedDate ) {
                $( "#dateRangeFrom1" ).datepicker( "option", "maxDate", selectedDate );
            }
        }).datepicker( "option", "minDate", $('#dateRangeFrom1').val() );
    }    
    
    
    
    
    
    // daterange2
    if ($('#dateRangeFrom2').length && $('#dateRangeTo2').length)
    {
        $( "#dateRangeFrom2" ).datepicker({
            defaultDate: "+1w",
            changeMonth: false,
            numberOfMonths: 2,
            onClose: function( selectedDate ) {
                $( "#dateRangeTo2" ).datepicker( "option", "minDate", selectedDate );
            }
        }).datepicker( "option", "maxDate", $('#dateRangeTo2').val() );


        $( "#dateRangeTo2" ).datepicker({
            defaultDate: "+1w",
            changeMonth: false,
            numberOfMonths: 2,
            onClose: function( selectedDate ) {
                $( "#dateRangeFrom2" ).datepicker( "option", "maxDate", selectedDate );
            }
        }).datepicker( "option", "minDate", $('#dateRangeFrom2').val() );
    }    










// daterange3
    if ($('#dateRangeFrom3').length && $('#dateRangeTo3').length)
    {
        $( "#dateRangeFrom3" ).datepicker({
            defaultDate: "+1w",
            changeMonth: false,
            numberOfMonths: 2,
            onClose: function( selectedDate ) {
                $( "#dateRangeTo3" ).datepicker( "option", "minDate", selectedDate );
            }
        }).datepicker( "option", "maxDate", $('#dateRangeTo3').val() );


        $( "#dateRangeTo3" ).datepicker({
            defaultDate: "+1w",
            changeMonth: false,
            numberOfMonths: 2,
            onClose: function( selectedDate ) {
                $( "#dateRangeFrom3" ).datepicker( "option", "maxDate", selectedDate );
            }
        }).datepicker( "option", "minDate", $('#dateRangeFrom3').val() );
    }


In questo caso ne ho inseriti solamente 3 ma non vorrei scrivere il codice di tutti e 60;

Nella pagina dove li richiamo, successivamente, ho utilizzato un metodo automatico per incrementare il numero più o meno in questo modo:

i = i+1
<input type="text" id="dateRangeFrom1" />
<input type="hidden" id="dateRangeTo1" />
next....

c'è un modo per automatizzare la cosa anche nella pagina common.js?