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

djdonovans · #1 (**permalink**) 13/08/2014, 15:58

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<html>
<head>
 
<script src="jquery/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="jquery/jquery-ui.css">
<script type="text/javascript" src="jquery/jquery-ui.min.js"></script>
 
 
<script>
$(function () {
$("#fecha1").datepicker({
      changeMonth: true,
      changeYear: true
    });
$("#fecha2").datepicker({
      changeMonth: true,
      changeYear: true
    });
});
 
$.datepicker.regional['es'] = {
 closeText: 'Cerrar',
 prevText: '<Ant',
 nextText: 'Sig>',
 currentText: 'Hoy',
 monthNames: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
 monthNamesShort: ['Ene','Feb','Mar','Abr', 'May','Jun','Jul','Ago','Sep', 'Oct','Nov','Dic'],
 dayNames: ['Domingo', 'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado'],
 dayNamesShort: ['Dom','Lun','Mar','Mié','Juv','Vie','Sáb'],
 dayNamesMin: ['Do','Lu','Ma','Mi','Ju','Vi','Sá'],
 weekHeader: 'Sm',
 dateFormat: 'dd/mm/yy',
 firstDay: 1,
 isRTL: false,
 showMonthAfterYear: false,
 yearSuffix: ''
 };
 $.datepicker.setDefaults($.datepicker.regional['es']);
$(function () {
$("#fecha").datepicker();
});
 
</script> 
 
 
</head> 
 
<body> 
    <form name='frm'> 
        <div class="control-group">
            <label>Desde Fecha:</label>
            <input type="text" name="de_fecha" id="fecha1"/>
        </div>
        <div class="control-group">
            <label>Hasta Fecha:</label>
            <input type="text" name="a_fecha" id="fecha2"/>
        </div>
        <div class="control-group">
            <label>Total Dias:</label>
            <input type="text" name="total" disabled/>
            <input type="checkbox" id="casilla" value="1"/>Valor Manual
        </div>
    </form> 
</body> 
</html>

Alexis88 · #2 (**permalink**) 14/08/2014, 00:14

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 originalfunction diferencia(){
    var fecha1 = $("#fecha1").val(),
        fecha2 = $("#fecha2").val();
            
    if (fecha1.length && fecha2.length){
        var arr1 = fecha1.split("/"), //Separamos los datos de la fecha, formando un array con ellos
            arr2 = fecha2.split("/"), //Separamos los datos de la fecha, formando un array con ellos
            dias1 = (new Date(arr1[2], arr1[1], arr1[0]).getTime() / 1000) / 86400, //Calculamos la cantidad de días que representa
            dias2 = (new Date(arr2[2], arr2[1], arr2[0]).getTime() / 1000) / 86400, //Calculamos la cantidad de días que representa
            dif = dias2 > dias1 ? dias2 - dias1 : dias1 - dias2; //Restamos la cantidad de días que representa cada fecha
        $("[name=total]").val(dif); //Asignamos la resta a la tercera caja
    }
}
    
$("#fecha1, #fecha2").datepicker({
    changeMonth: true,
    changeYear: true,
    onSelect: diferencia
});

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

djdonovans · #3 (**permalink**) 14/08/2014, 08:22

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

djdonovans · #4 (**permalink**) 14/08/2014, 09:09

comparto con todos el ejemplo completo:

Código HTML:

Ver original<html>
<head>
 
<script src="jquery/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="jquery/jquery-ui.css">
<script type="text/javascript" src="jquery/jquery-ui.min.js"></script>
 
<script>
function diferencia(){
    var fecha1 = $("#fecha1").val(),
        fecha2 = $("#fecha2").val();
            
    if (fecha1.length && fecha2.length){
        var arr1 = fecha1.split("/"), //Separamos los datos de la fecha, formando un array con ellos
            arr2 = fecha2.split("/"), //Separamos los datos de la fecha, formando un array con ellos
            dias1 = (new Date(arr1[2], arr1[1], arr1[0]).getTime() / 1000) / 86400, //Calculamos la cantidad de días que representa
            dias2 = (new Date(arr2[2], arr2[1], arr2[0]).getTime() / 1000) / 86400, //Calculamos la cantidad de días que representa
            dif = dias2 > dias1 ? dias2 - dias1 : dias1 - dias2; //Restamos la cantidad de días que representa cada fecha
        $("[name=total]").val(dif); //Asignamos la resta a la tercera caja
    }
}
 
$(function () {
$("#fecha1, #fecha2").datepicker({
    changeMonth: true,
    changeYear: true,
    onSelect: diferencia
});
});
 
$.datepicker.regional['es'] = {
 closeText: 'Cerrar',
 prevText: '<Ant',
 nextText: 'Sig>',
 currentText: 'Hoy',
 monthNames: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
 monthNamesShort: ['Ene','Feb','Mar','Abr', 'May','Jun','Jul','Ago','Sep', 'Oct','Nov','Dic'],
 dayNames: ['Domingo', 'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado'],
 dayNamesShort: ['Dom','Lun','Mar','Mié','Juv','Vie','Sáb'],
 dayNamesMin: ['Do','Lu','Ma','Mi','Ju','Vi','Sá'],
 weekHeader: 'Sm',
 dateFormat: 'dd/mm/yy',
 firstDay: 1,
 isRTL: false,
 showMonthAfterYear: false,
 yearSuffix: ''
 };
 $.datepicker.setDefaults($.datepicker.regional['es']);
$(function () {
$("#fecha").datepicker();
});
 
</script> 
 
</head> 
 
<body> 
    <form name='frm' id="frm"> 
        <div class="control-group">
            <label>Desde Fecha:</label>
            <input type="text" name="de_fecha" id="fecha1"/>
        </div>
        <div class="control-group">
            <label>Hasta Fecha:</label>
            <input type="text" name="a_fecha" id="fecha2"/>
        </div>
        <div class="control-group">
            <label>Total Dias:</label>
            <input type="text" name="total" id="total" disabled/>
            <input type="checkbox" id="casilla" value="1" onclick="JavaScript:document.frm.total.disabled = !this.checked"/>Valor Manual
        </div>
    </form> 
</body> 
</html>