Calcular Diferencia de Horas entre 2 fechas usando Javascript

Hola Amigos, hoy veremos como podemos utilizar Javascript para calcular la diferencia de horas entre 2 fechas.

Cabe destacar que este código esta diseñado para calcular las horas en formato de porcentaje es decir, no se calculara el tiempo de diferencia como (1 hora 30 minutos) sino como (1.50 Hrs).

<!DOCTYPE html>
<html lang="es">
<head>
        <script>
                function diferenciahoras() {
                        var f1 = document.getElementById("fechaini").value;
                        var f2 = document.getElementById("fechafin").value;
                        var horainicio = (document.getElementById("horaini").value).split(":");
                        var horafinal = (document.getElementById("hora_fin").value).split(":");
                        var aFecha1 = f1.split('/'); 
                        var aFecha2 = f2.split('/'); 
                        var fFecha1 = Date.UTC(aFecha1[2],aFecha1[1]-1,aFecha1[0]); 
                        var fFecha2 = Date.UTC(aFecha2[2],aFecha2[1]-1,aFecha2[0]); 
                        var dif = fFecha2 - fFecha1;
                        var dias = Math.floor(dif / (1000 * 60 * 60 * 24)); 
                        var diferenciahorasfechas = dias * 24;
                        var horasdiainicio = horainicio[0] / 1;
                        var minutosdiainicio = horainicio[1] /= 60;
                        var rangohoras1 = horasdiainicio + minutosdiainicio;
 
 
                        var horasdiafinal = horafinal[0] / 1;
                        var minutosdiafinal = horafinal[1] /= 60;
                        var rangohoras2 = horasdiafinal + minutosdiafinal;
 
 
                        var diferenciahorasdia = rangohoras2 - rangohoras1;
 
                        horastotales = diferenciahorasfechas + diferenciahorasdia;
                        if (horastotales >= 0) { 
                                document.getElementById("diferencia").innerHTML = " Duración ( "+ horastotales.toFixed(2) + " Hrs )";
                        } else {
                                document.getElementById("diferencia").innerHTML = "";
                        }
                }
        </script>
        <style>
                table {
                        margin: auto;
                }
                table th {
                        background-color: blue;
                        color: white;
                }
                h1 {
                        font-size: 24px;
                        text-align: center;
                }
                #diferencia {
                        float: right;
                }
        </style>
        <meta charset="UTF-8">
        <title>Calculos Horas</title>
</head>
<body>
        <h1>Calculo de diferencia de Horas</h1>
        <br />
        <table>
                <thead>
                        <tr>
                                <th>Descripcio³n</th>
                                <th>Fecha (##/##/####)</th>
                                <th>Hora (##:##) 24 (hrs)</th>
                        </tr>
                </thead>
                <tbody>
                        <tr>
                                <td>Inicio</td>
                                <td><input id="fechaini" type="text"></td>
                                <td><input id="horaini" type="text"></td>
                        </tr>
                        <tr>
                                <td>Final</td>
                                <td><input id="fechafin" type="text"></td>
                                <td><input id="hora_fin" type="text"></td>
                        </tr>
                </tbody>
                <tr>
                        <td colspan="3">
                                <button onclick="diferenciahoras()">Calcular</button><span id="diferencia"></span>
                        </td>
                </tr>
        </table>
</body>
</html>

Es importante que ingreses los valores como se indican en la cabecera de la tabla tal como fecha (##/##/####) y hora (##:##) aparte que la hora debe estar en formato 24 Hrs es decir, si quieres ingresar la 1 de la tarde debes colocar 13:00.

Tags: