[SOLUCIONADO] Control de fechas para dos calendarios JavaScript (jscalendar)

[cachimira]

Buenos días,

tengo una duda con calendarios en JavaScript, usando 'jscalendar'.
He conseguido que funcionen un par de ellos en mi código en PHP de forma correcta. Uno sirve para una fecha de inicio y el otro para una fecha de fin.
Lo que no veo como hacer es que, una vez escogida la fecha de inicio solo se pueda escoger una fecha de fin posterior a la primera. Lo que hacen por ejemplo en varias webs para escoger vuelos de ida y de vuelta.

Mi código es este:

Código PHP:

...
<td>
    <input align="center" type="text" name="data_ini" id="data_ini" readonly="1"/>
    <img src="jscalendar/img_ctns.gif" id="f_trigger_a" title="Date selector" onmouseover="this.style.background='red';" onmouseout="this.style.background=''" />
    <script type="text/javascript">
        Calendar.setup({
            inputField     :    "data_ini",     // id of the input field
            ifFormat       :    "%d/%m/%Y",      // format of the input field
            button         :    "f_trigger_a",  // trigger for the calendar (button ID)
            singleClick    :    true
        });
    </script>
</td>
<td>
    <input align="center" type="text" name="data_fi" id="data_fi" readonly="1"/>
    <img src="jscalendar/img_ctns.gif" id="f_trigger_b" title="Date selector" onmouseover="this.style.background='red';" onmouseout="this.style.background=''" />
    <script type="text/javascript">
        Calendar.setup({
            inputField     :    "data_fi",     // id of the input field
            ifFormat       :    "%d/%m/%Y",      // format of the input field
            button         :    "f_trigger_b",  // trigger for the calendar (button ID)
            singleClick    :    true
        });
    </script>
</td>
...
 

Muchas gracias!

[maycolalvarez]

podrías consultar la documentación para limitar el rango de fechas del segundo en función del primero, pero para mí sería más importante validar en el servidor que la f2 no sea menor que la f1. luego de eso aplico lo que falte del lado del cliente.

[cachimira]

Hola,
púes claro!
Ya lo solucioné, os copio el código para aquellos que les interese:

Código PHP:

<tr>
    <td>
        <input align="center" type="text" name="data_ini" id="data_ini" readonly="1" onChange="data_ok_ini('data_ini', 'data_fi')"/>
        <img src="jscalendar/img_ctns.gif" id="f_trigger_a" title="Date selector" onmouseover="this.style.background='red';" onmouseout="this.style.background=''" />
        <script type="text/javascript">
            Calendar.setup({
                inputField     :    "data_ini",     // id of the input field
                ifFormat       :    "%d/%m/%Y",      // format of the input field
                button         :    "f_trigger_a",  // trigger for the calendar (button ID)
                singleClick    :    true
            });
        </script>
    </td>
    <td>
        <input align="center" type="text" name="data_fi" id="data_fi" readonly="1" onChange="data_ok_fi('data_ini', 'data_fi')"/>
        <img src="jscalendar/img_ctns.gif" id="f_trigger_b" title="Date selector" onmouseover="this.style.background='red';" onmouseout="this.style.background=''" />
        <script type="text/javascript">
            Calendar.setup({
                inputField     :    "data_fi",     // id of the input field
                ifFormat       :    "%d/%m/%Y",      // format of the input field
                button         :    "f_trigger_b",  // trigger for the calendar (button ID)
                singleClick    :    true
            });
        </script>
    </td>
</tr>
 

Código Javascript:

function data_ok_ini(sel_data_ini, sel_data_fi){
    var elem_data_ini=document.getElementById(sel_data_ini);
    var elem_data_fi=document.getElementById(sel_data_fi);
 
    if (elem_data_fi.value != '') {
        if (elem_data_ini.value >= elem_data_fi.value) {        //KO data ini sempre ha de ser més petita que la data fi
            alert("Error, la fecha de inicio debe ser siempre más pequeña que la fecha de fin");
            elem_data_ini.value='';
            elem_data_fi.value='';
        }
    }
}
 
function data_ok_fi(sel_data_ini, sel_data_fi){
    var elem_data_ini=document.getElementById(sel_data_ini);
    var elem_data_fi=document.getElementById(sel_data_fi);
 
    if (elem_data_ini.value >= elem_data_fi.value) {        //KO data ini sempre ha de ser més petita que la data fi
        alert("Error, la fecha de inicio debe ser siempre más pequeña que la fecha de fin");
        elem_data_ini.value='';
        elem_data_fi.value='';
    }
}
 

[cachimira]

Muchas gracias!!! :D