Foros del Web » Programando para Internet » Javascript » Frameworks JS »

[SOLUCIONADO] Calcular Diferencia entre 2 Fechas, aun input con checkbox

 Estas en el tema de Calcular Diferencia entre 2 Fechas, aun input con checkbox en el foro de Frameworks JS en Foros del Web. Saludos a toda la comunidad tengo este problema con el cual no estoy pudiendo solucionarlo el Caso es q tengo 2 Input con datepicker y ...
  #1 (permalink)  
Antiguo 13/08/2014, 15:58
 
Fecha de Ingreso: marzo-2007
Mensajes: 17
Antigüedad: 17 años, 1 mes
Puntos: 0
Pregunta Calcular Diferencia entre 2 Fechas, aun input con checkbox
Saludos a toda la comunidad tengo este problema con el cual no estoy pudiendo solucionarlo

el Caso es q tengo 2 Input con datepicker y necesito calcular en tiempo real la cantidad de dias atraves de estas 2 fechas y ese calculo debe ir a otro input que esta bloqueado

y si por alguna razon deseo poner ese calculo manual necesito habilitar ese input que esta bloqueado y hacer una edicion a ese input.

Estare infinitamente agradecito por su ayuda.

Código HTML: 
Ver original
  1. <html>
  2. <head>
  3.  
  4. <script src="jquery/jquery.js"></script>
  5. <link rel="stylesheet" type="text/css" href="jquery/jquery-ui.css">
  6. <script type="text/javascript" src="jquery/jquery-ui.min.js"></script>
  7.  
  8.  
  9. <script>
  10. $(function () {
  11. $("#fecha1").datepicker({
  12.       changeMonth: true,
  13.       changeYear: true
  14.     });
  15. $("#fecha2").datepicker({
  16.       changeMonth: true,
  17.       changeYear: true
  18.     });
  19. });
  20.  
  21. $.datepicker.regional['es'] = {
  22.  closeText: 'Cerrar',
  23.  prevText: '<Ant',
  24.  nextText: 'Sig>',
  25.  currentText: 'Hoy',
  26.  monthNames: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
  27.  monthNamesShort: ['Ene','Feb','Mar','Abr', 'May','Jun','Jul','Ago','Sep', 'Oct','Nov','Dic'],
  28.  dayNames: ['Domingo', 'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado'],
  29.  dayNamesShort: ['Dom','Lun','Mar','Mié','Juv','Vie','Sáb'],
  30.  dayNamesMin: ['Do','Lu','Ma','Mi','Ju','Vi','Sá'],
  31.  weekHeader: 'Sm',
  32.  dateFormat: 'dd/mm/yy',
  33.  firstDay: 1,
  34.  isRTL: false,
  35.  showMonthAfterYear: false,
  36.  yearSuffix: ''
  37.  };
  38.  $.datepicker.setDefaults($.datepicker.regional['es']);
  39. $(function () {
  40. $("#fecha").datepicker();
  41. });
  42.  
  43. </script> 
  44.  
  45.  
  46. </head> 
  47.  
  48. <body> 
  49.     <form name='frm'> 
  50.         <div class="control-group">
  51.             <label>Desde Fecha:</label>
  52.             <input type="text" name="de_fecha" id="fecha1"/>
  53.         </div>
  54.         <div class="control-group">
  55.             <label>Hasta Fecha:</label>
  56.             <input type="text" name="a_fecha" id="fecha2"/>
  57.         </div>
  58.         <div class="control-group">
  59.             <label>Total Dias:</label>
  60.             <input type="text" name="total" disabled/>
  61.             <input type="checkbox" id="casilla" value="1"/>Valor Manual
  62.         </div>
  63.     </form> 
  64. </body> 
  65. </html>
  #2 (permalink)  
Antiguo 14/08/2014, 00:14
Avatar de Alexis88
Philosopher
  
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.552
Antigüedad: 12 años, 5 meses
Puntos: 977
Respuesta: Calcular Diferencia entre 2 Fechas, aun input con checkbox
Para que el cálculo sea automático, debes de asignar una función al atributo onSelect del widget datepicker. En dicha función, tomas las fechas de ambas cajas, calculas la cantidad de días que representan ambas fechas (recordando que se toma el tiempo transcurrido desde el 1 de enero de 1970), las restas y muestras la diferencia en la tercera caja.

Código Javascript: 
Ver original
  1. function diferencia(){
  2.     var fecha1 = $("#fecha1").val(),
  3.         fecha2 = $("#fecha2").val();
  4.             
  5.     if (fecha1.length && fecha2.length){
  6.         var arr1 = fecha1.split("/"), //Separamos los datos de la fecha, formando un array con ellos
  7.             arr2 = fecha2.split("/"), //Separamos los datos de la fecha, formando un array con ellos
  8.             dias1 = (new Date(arr1[2], arr1[1], arr1[0]).getTime() / 1000) / 86400, //Calculamos la cantidad de días que representa
  9.             dias2 = (new Date(arr2[2], arr2[1], arr2[0]).getTime() / 1000) / 86400, //Calculamos la cantidad de días que representa
  10.             dif = dias2 > dias1 ? dias2 - dias1 : dias1 - dias2; //Restamos la cantidad de días que representa cada fecha
  11.         $("[name=total]").val(dif); //Asignamos la resta a la tercera caja
  12.     }
  13. }
  14.     
  15. $("#fecha1, #fecha2").datepicker({
  16.     changeMonth: true,
  17.     changeYear: true,
  18.     onSelect: diferencia
  19. });

Para calcular el tiempo representado por cada fecha, extraigo cada dato de cada una de las fechas y utilizando el objeto Date y sus métodos, calculo la cantidad de días que representa cada fecha. Luego, realizo la resta entre ambas cantidades, para finalmente asignar dicho resultado a la tercera caja. Todo esto solo ocurrirá cuando ambas cajas tengas las fechas asignadas.

Saludos
__________________
«Juro por mi vida y mi amor por ella, que jamás viviré para el provecho de otro hombre, ni le pediré a otro hombre que viva para el mío».

― Ayn Rand
Última edición por Alexis88; 14/08/2014 a las 00:29 Razón: Mejora
  #3 (permalink)  
Antiguo 14/08/2014, 08:22
 
Fecha de Ingreso: marzo-2007
Mensajes: 17
Antigüedad: 17 años, 1 mes
Puntos: 0
Respuesta: Calcular Diferencia entre 2 Fechas, aun input con checkbox
muchisimas gracias por tu ayuda Alexis88 me sirvio eficientemente tu ayuda. mil gracias

ahora necesito q la tercera casilla pueda editarse manualmente y espero solucionarlo. muchas gracias por tu ayuda
  #4 (permalink)  
Antiguo 14/08/2014, 09:09
 
Fecha de Ingreso: marzo-2007
Mensajes: 17
Antigüedad: 17 años, 1 mes
Puntos: 0
Respuesta: Calcular Diferencia entre 2 Fechas, aun input con checkbox
comparto con todos el ejemplo completo:
Código HTML: 
Ver original
  1. <html>
  2. <head>
  3.  
  4. <script src="jquery/jquery.js"></script>
  5. <link rel="stylesheet" type="text/css" href="jquery/jquery-ui.css">
  6. <script type="text/javascript" src="jquery/jquery-ui.min.js"></script>
  7.  
  8. <script>
  9. function diferencia(){
  10.     var fecha1 = $("#fecha1").val(),
  11.         fecha2 = $("#fecha2").val();
  12.             
  13.     if (fecha1.length && fecha2.length){
  14.         var arr1 = fecha1.split("/"), //Separamos los datos de la fecha, formando un array con ellos
  15.             arr2 = fecha2.split("/"), //Separamos los datos de la fecha, formando un array con ellos
  16.             dias1 = (new Date(arr1[2], arr1[1], arr1[0]).getTime() / 1000) / 86400, //Calculamos la cantidad de días que representa
  17.             dias2 = (new Date(arr2[2], arr2[1], arr2[0]).getTime() / 1000) / 86400, //Calculamos la cantidad de días que representa
  18.             dif = dias2 > dias1 ? dias2 - dias1 : dias1 - dias2; //Restamos la cantidad de días que representa cada fecha
  19.         $("[name=total]").val(dif); //Asignamos la resta a la tercera caja
  20.     }
  21. }
  22.  
  23. $(function () {
  24. $("#fecha1, #fecha2").datepicker({
  25.     changeMonth: true,
  26.     changeYear: true,
  27.     onSelect: diferencia
  28. });
  29. });
  30.  
  31. $.datepicker.regional['es'] = {
  32.  closeText: 'Cerrar',
  33.  prevText: '<Ant',
  34.  nextText: 'Sig>',
  35.  currentText: 'Hoy',
  36.  monthNames: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
  37.  monthNamesShort: ['Ene','Feb','Mar','Abr', 'May','Jun','Jul','Ago','Sep', 'Oct','Nov','Dic'],
  38.  dayNames: ['Domingo', 'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado'],
  39.  dayNamesShort: ['Dom','Lun','Mar','Mié','Juv','Vie','Sáb'],
  40.  dayNamesMin: ['Do','Lu','Ma','Mi','Ju','Vi','Sá'],
  41.  weekHeader: 'Sm',
  42.  dateFormat: 'dd/mm/yy',
  43.  firstDay: 1,
  44.  isRTL: false,
  45.  showMonthAfterYear: false,
  46.  yearSuffix: ''
  47.  };
  48.  $.datepicker.setDefaults($.datepicker.regional['es']);
  49. $(function () {
  50. $("#fecha").datepicker();
  51. });
  52.  
  53. </script> 
  54.  
  55. </head> 
  56.  
  57. <body> 
  58.     <form name='frm' id="frm"> 
  59.         <div class="control-group">
  60.             <label>Desde Fecha:</label>
  61.             <input type="text" name="de_fecha" id="fecha1"/>
  62.         </div>
  63.         <div class="control-group">
  64.             <label>Hasta Fecha:</label>
  65.             <input type="text" name="a_fecha" id="fecha2"/>
  66.         </div>
  67.         <div class="control-group">
  68.             <label>Total Dias:</label>
  69.             <input type="text" name="total" id="total" disabled/>
  70.             <input type="checkbox" id="casilla" value="1" onclick="JavaScript:document.frm.total.disabled = !this.checked"/>Valor Manual
  71.         </div>
  72.     </form> 
  73. </body> 
  74. </html>

Etiquetas: calcular, checkbox, diferencia, html, input, javascript, js, valor
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


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 11:18.