Tema: Calcular Diferencia entre 2 Fechas, aun input con checkbox
Ver Mensaje Individual
  #4 (permalink)  
Antiguo 14/08/2014, 09:09
djdonovans
 
Fecha de Ingreso: marzo-2007
Mensajes: 17
Antigüedad: 17 años, 9 meses
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>