Foros del Web » Programando para Internet » Javascript »

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

Estas en el tema de Control de fechas para dos calendarios JavaScript (jscalendar) en el foro de Javascript en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 05/04/2013, 02:49
 
Fecha de Ingreso: noviembre-2010
Mensajes: 24
Antigüedad: 11 años, 9 meses
Puntos: 0
Control de fechas para dos calendarios JavaScript (jscalendar)

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:
Ver original
  1. ...
  2. <td>
  3.     <input align="center" type="text" name="data_ini" id="data_ini" readonly="1"/>
  4.     <img src="jscalendar/img_ctns.gif" id="f_trigger_a" title="Date selector" onmouseover="this.style.background='red';" onmouseout="this.style.background=''" />
  5.     <script type="text/javascript">
  6.         Calendar.setup({
  7.             inputField     :    "data_ini",     // id of the input field
  8.             ifFormat       :    "%d/%m/%Y",      // format of the input field
  9.             button         :    "f_trigger_a",  // trigger for the calendar (button ID)
  10.             singleClick    :    true
  11.         });
  12.     </script>
  13. </td>
  14. <td>
  15.     <input align="center" type="text" name="data_fi" id="data_fi" readonly="1"/>
  16.     <img src="jscalendar/img_ctns.gif" id="f_trigger_b" title="Date selector" onmouseover="this.style.background='red';" onmouseout="this.style.background=''" />
  17.     <script type="text/javascript">
  18.         Calendar.setup({
  19.             inputField     :    "data_fi",     // id of the input field
  20.             ifFormat       :    "%d/%m/%Y",      // format of the input field
  21.             button         :    "f_trigger_b",  // trigger for the calendar (button ID)
  22.             singleClick    :    true
  23.         });
  24.     </script>
  25. </td>
  26. ...


Muchas gracias!
  #2 (permalink)  
Antiguo 05/04/2013, 11:58
Avatar de maycolalvarez
Colaborador
 
Fecha de Ingreso: julio-2008
Ubicación: Caracas
Mensajes: 12.120
Antigüedad: 14 años
Puntos: 1532
Respuesta: Control de fechas para dos calendarios JavaScript (jscalendar)

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.
__________________
¡Por favor!: usa el highlight para mostrar código
El que busca, encuentra...
  #3 (permalink)  
Antiguo 08/04/2013, 08:55
 
Fecha de Ingreso: noviembre-2010
Mensajes: 24
Antigüedad: 11 años, 9 meses
Puntos: 0
Respuesta: Control de fechas para dos calendarios JavaScript (jscalendar)

Hola,
púes claro!
Ya lo solucioné, os copio el código para aquellos que les interese:
Código PHP:
Ver original
  1. <tr>
  2.     <td>
  3.         <input align="center" type="text" name="data_ini" id="data_ini" readonly="1" onChange="data_ok_ini('data_ini', 'data_fi')"/>
  4.         <img src="jscalendar/img_ctns.gif" id="f_trigger_a" title="Date selector" onmouseover="this.style.background='red';" onmouseout="this.style.background=''" />
  5.         <script type="text/javascript">
  6.             Calendar.setup({
  7.                 inputField     :    "data_ini",     // id of the input field
  8.                 ifFormat       :    "%d/%m/%Y",      // format of the input field
  9.                 button         :    "f_trigger_a",  // trigger for the calendar (button ID)
  10.                 singleClick    :    true
  11.             });
  12.         </script>
  13.     </td>
  14.     <td>
  15.         <input align="center" type="text" name="data_fi" id="data_fi" readonly="1" onChange="data_ok_fi('data_ini', 'data_fi')"/>
  16.         <img src="jscalendar/img_ctns.gif" id="f_trigger_b" title="Date selector" onmouseover="this.style.background='red';" onmouseout="this.style.background=''" />
  17.         <script type="text/javascript">
  18.             Calendar.setup({
  19.                 inputField     :    "data_fi",     // id of the input field
  20.                 ifFormat       :    "%d/%m/%Y",      // format of the input field
  21.                 button         :    "f_trigger_b",  // trigger for the calendar (button ID)
  22.                 singleClick    :    true
  23.             });
  24.         </script>
  25.     </td>
  26. </tr>

Código Javascript:
Ver original
  1. function data_ok_ini(sel_data_ini, sel_data_fi){
  2.     var elem_data_ini=document.getElementById(sel_data_ini);
  3.     var elem_data_fi=document.getElementById(sel_data_fi);
  4.  
  5.     if (elem_data_fi.value != '') {
  6.         if (elem_data_ini.value >= elem_data_fi.value) {        //KO data ini sempre ha de ser més petita que la data fi
  7.             alert("Error, la fecha de inicio debe ser siempre más pequeña que la fecha de fin");
  8.             elem_data_ini.value='';
  9.             elem_data_fi.value='';
  10.         }
  11.     }
  12. }
  13.  
  14. function data_ok_fi(sel_data_ini, sel_data_fi){
  15.     var elem_data_ini=document.getElementById(sel_data_ini);
  16.     var elem_data_fi=document.getElementById(sel_data_fi);
  17.  
  18.     if (elem_data_ini.value >= elem_data_fi.value) {        //KO data ini sempre ha de ser més petita que la data fi
  19.         alert("Error, la fecha de inicio debe ser siempre más pequeña que la fecha de fin");
  20.         elem_data_ini.value='';
  21.         elem_data_fi.value='';
  22.     }
  23. }
  #4 (permalink)  
Antiguo 08/04/2013, 08:55
 
Fecha de Ingreso: noviembre-2010
Mensajes: 24
Antigüedad: 11 años, 9 meses
Puntos: 0
Respuesta: Control de fechas para dos calendarios JavaScript (jscalendar)

Muchas gracias!!! :D

Etiquetas: control, funcion, input, js, php, select
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 03:22.