Cómo calcular la diferencia entre dos fechas, devolviendo años, meses y días con JavaScript
Cómo calcular la diferencia entre dos fechas, devolviendo años, meses y días con JavaScript

AVISO: Esta entrada tiene más de dos años desde su publicación. Es posible que el contenido esté desactualizado.

El ejercicio de JavaScript que voy a dejar hoy, trata de cómo obtener la diferencia entre dos fechas, en años, meses y días entre dos fechas que previamente seleccionaremos en un formulario. Para realizar este script necesitaremos importar una librería de Jquery.min.js la cual tendrás que guardar en el mismo directorio donde guardes el código que mostraré líneas más abajo.

El código que se muestra es mejorable. Por el momento no tiene en cuenta el límite de días por mes (el més de febrero traga con 31 días y cosas por el estilo). Tampoco va a tener en cuenta lo años bisiestos, pero como todo en esta web. El siguiente código es susceptible de ser cambiado por quien guste de hacer (yo quizás lo haga en próximos ejercicios). El único requisito que por el momento cumple es que la fecha de inicio siempre ha de ser más pequeña que la fecha final.

El resultado que produce la ejecución viene siendo algo como : La diferencia entre ambas fechas es de XX años, XX meses y XX días.

Calcula la diferencia entre fechas con JavaScript

Una vez explicado el asunto (y recordando que sin la librería de jquery no funcionará tal y como está programado), vamos al turrón del asunto …

    <!DOCTYPE html>
    <html>
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <title>Calcular diferencia entre dos fechas</title>
      <script src="jquery.min.js" type="text/javascript"></script>
     
    </head>
    <body >
              <div align="center"> 
          <h1>
            Calcular diferencia entre dos fechas
          </h1>
          <b>Ejercicio 4 y 5</b>
              <p><i>Calculadora para medir el tiempo entre dos fechas en días, meses y años</i></p>
          </div>
     
        <p>
            Calculadora para conocer la diferencia en días, meses y años entre dos fechas distintas. Selecciona en el siguiente formulario una fecha de inicio y una fecha final para conocer el tiempo exacto que ha transcurrido. La fecha inicio siempre ha de ser menor que la fecha final.</p>
    <form >
            <hr>
            <p align="center">
                    Fecha Inicio:<br />
                    <label>Día:</label>
                    <select id="dia_pasado" >
                            <option value="1">1</option>
                            <option value="2">2</option>
                            <option value="3">3</option>
                            <option value="4">4</option>
                            <option value="5">5</option>
                            <option value="6">6</option>
                            <option value="7">7</option>
                            <option value="8">8</option>
                            <option value="9">9</option>
                            <option value="10">10</option>
                            <option value="11">11</option>
                            <option value="12">12</option>
                            <option value="13">13</option>
                            <option value="14">14</option>
                            <option value="15">15</option>
                            <option value="16">16</option>
                            <option value="17">17</option>
                            <option value="18">18</option>
                            <option value="19">19</option>
                            <option value="20">20</option>
                            <option value="21">21</option>
                            <option value="22">22</option>
                            <option value="23">23</option>
                            <option value="24">24</option>
                            <option value="25">25</option>
                            <option value="26">26</option>
                            <option value="27">27</option>
                            <option value="28">28</option>
                            <option value="29">29</option>
                            <option value="30">30</option>
                            <option value="31">31</option>
                            </select>
                    <label>Mes:</label>
                    <select id="mes_pasado">
                        <option value="0">Enero</option>
                        <option value="1">Febrero</option>
                        <option value="2">Marzo</option>
                        <option value="3">Abril</option>
                        <option value="4">Mayo</option>
                        <option value="5">Junio</option>
                        <option value="6">Julio</option>
                        <option value="7">Agosto</option>
                        <option value="8">Setiembre</option>
                        <option value="9">Octubre</option>
                        <option value="10">Noviembre</option>
                        <option value="11">Diciembre</option>
                        </select>
                    <label>Año:</label>
                    <select id="anio_pasado" >
                        <option selected="selected" value="1980">1980</option>
                        <option value="1981">1981</option>
                        <option value="1982">1982</option>
                        <option value="1983">1983</option>
                        <option value="1984">1984</option>
                        <option value="1985">1985</option>
                        <option value="1986">1986</option>
                        <option value="1987">1987</option>
                        <option value="1988">1988</option>
                        <option value="1989">1989</option>
                        <option value="1990">1990</option>
                        <option value="1991">1991</option>
                        <option value="1992">1992</option>
                        <option value="1993">1993</option>
                        <option value="1994">1994</option>
                        <option value="1995">1995</option>
                        <option value="1996">1996</option>
                        <option value="1997">1997</option>
                        <option value="1998">1998</option>
                        <option value="1999">1999</option>
                        <option value="2000">2000</option>
                        <option value="2001">2001</option>
                        <option value="2002">2002</option>
                        <option value="2003">2003</option>
                        <option value="2004">2004</option>
                        <option value="2005">2005</option>
                        <option value="2006">2006</option>
                        <option value="2007">2007</option>
                        <option value="2008">2008</option>
                        <option value="2009">2009</option>
                        <option value="2010">2010</option>
                        <option value="2011">2011</option>
                        <option value="2012">2012</option>
                        <option value="2013">2013</option>
                        <option value="2014">2014</option>
                        <option value="2015">2015</option>
                        <option value="2016">2016</option>
                        <option value="2017">2017</option>
                        <option value="2018">2018</option>
                        <option value="2019">2019</option>
                        <option value="2020">2020</option>
                        <option value="2021">2021</option>
                        <option value="2022">2022</option>
                        <option value="2023">2023</option>
                        <option value="2024">2024</option>
                        <option value="2025">2025</option>
                        <option value="2026">2026</option>
                        <option value="2027">2027</option>
                        <option value="2028">2028</option>
                        <option value="2029">2029</option>
                        <option value="2030">2030</option>
                        <option value="2031">2031</option>
                        <option value="2032">2032</option>
                        <option value="2033">2033</option>
                        <option value="2034">2034</option>
                        <option value="2035">2035</option>
                        <option value="2036">2036</option>
                        <option value="2037">2037</option>
                        <option value="2038">2038</option>
                        <option value="2039">2039</option>
                        <option value="2040">2040</option>
                        <option value="2041">2041</option>
                    </select></p>
            <p align="center">
                    Fecha Fin:<br />
                    <label>Día:</label>
                    <select id="dia_futuro" >
                         <option value="1">1</option>
                         <option value="2">2</option>
                         <option value="3">3</option>
                         <option value="4">4</option>
                         <option value="5">5</option>
                         <option value="6">6</option>
                         <option value="7">7</option>
                         <option value="8">8</option>
                         <option value="9">9</option>
                         <option value="10">10</option>
                         <option value="11">11</option>
                         <option value="12">12</option>
                         <option value="13">13</option>
                         <option value="14">14</option>
                         <option value="15">15</option>
                         <option value="16">16</option>
                         <option value="17">17</option>
                         <option value="18">18</option>
                         <option value="19">19</option>
                         <option value="20">20</option>
                         <option value="21">21</option>
                         <option value="22">22</option>
                         <option value="23">23</option>
                         <option value="24">24</option>
                         <option value="25">25</option>
                         <option value="26">26</option>
                         <option value="27">27</option>
                         <option value="28">28</option>
                         <option value="29">29</option>
                         <option value="30">30</option>
                         <option value="31">31</option>
                         </select>
                    <label>Mes:</label>
                    <select id="mes_futuro">
                         <option value="0">Enero</option>
                         <option value="1">Febrero</option>
                         <option value="2">Marzo</option>
                         <option value="3">Abril</option>
                         <option value="4">Mayo</option>
                         <option value="5">Junio</option>
                         <option value="6">Julio</option>
                         <option value="7">Agosto</option>
                         <option value="8">Setiembre</option>
                         <option value="9">Octubre</option>
                         <option value="10">Noviembre</option>
                         <option value="11">Diciembre</option>
                         </select>
                    <label>Año:</label>
                    <select id="anio_futuro" >
                         <option value="1980">1980</option>
                         <option value="1981">1981</option>
                         <option value="1982">1982</option>
                         <option value="1983">1983</option>
                         <option value="1984">1984</option>
                         <option value="1985">1985</option>
                         <option value="1986">1986</option>
                         <option value="1987">1987</option>
                         <option value="1988">1988</option>
                         <option value="1989">1989</option>
                         <option value="1990">1990</option>
                         <option value="1991">1991</option>
                         <option value="1992">1992</option>
                         <option value="1993">1993</option>
                         <option value="1994">1994</option>
                         <option value="1995">1995</option>
                         <option value="1996">1996</option>
                         <option value="1997">1997</option>
                         <option value="1998">1998</option>
                         <option value="1999">1999</option>
                         <option value="2000">2000</option>
                         <option value="2001">2001</option>
                         <option value="2002">2002</option>
                         <option value="2003">2003</option>
                         <option value="2004">2004</option>
                         <option value="2005">2005</option>
                         <option value="2006">2006</option>
                         <option value="2007">2007</option>
                         <option value="2008">2008</option>
                         <option value="2009">2009</option>
                         <option value="2010">2010</option>
                         <option value="2011">2011</option>
                         <option value="2012">2012</option>
                         <option value="2013">2013</option>
                         <option value="2014">2014</option>
                         <option value="2015">2015</option>
                         <option value="2016">2016</option>
                         <option value="2017">2017</option>
                         <option value="2018">2018</option>
                         <option value="2019">2019</option>
                         <option value="2020">2020</option>
                         <option value="2021">2021</option>
                         <option value="2022">2022</option>
                         <option value="2023">2023</option>
                         <option value="2024">2024</option>
                         <option value="2025">2025</option>
                         <option value="2026">2026</option>
                         <option value="2027">2027</option>
                         <option value="2028">2028</option>
                         <option value="2029">2029</option>
                         <option value="2030">2030</option>
                         <option value="2031">2031</option>
                         <option value="2032">2032</option>
                         <option value="2033">2033</option>
                         <option value="2034">2034</option>
                         <option value="2035">2035</option>
                         <option value="2036">2036</option>
                         <option value="2037">2037</option>
                         <option value="2038">2038</option>
                         <option value="2039">2039</option>
                         <option value="2040">2040</option>
                         <option selected="selected" value="2041">2041</option>
                    </select></p>
            <p align="center">
                    <input id="calcular" type="submit" value="Calcular" /></p> <!--llama a la función calcular -->
                    <hr>
            <p id="total" align="center"> </p>
    </form>
    <p>
    <script>
            $(document).ready(function() { //función tratada con jquery
                    $('#calcular').click(function(event){ //función calcular
     
                            var fecha_pasada = new Date(parseInt($('#anio_pasado').val()), parseInt($('#mes_pasado').val()), parseInt($('#dia_pasado').val()), 0, 0, 0, 0); //formamos la fecha pasada
                            var fecha_futura = new Date(parseInt($('#anio_futuro').val()), parseInt($('#mes_futuro').val()), parseInt($('#dia_futuro').val()), 0, 0, 0, 0); //formamos la fecha futura
     
                            var total_dias = 0;
                            var total_meses = 0;
                            var total_anhos = 0;
                            var b = 0; //variable para finales de mes
     
                            if(fecha_pasada.getMonth() == 2){ //mes de febrero
                                    //if para saber si el año es bisiesto
                              if((fecha_futura.getYear() % 4 == 0 && fecha_futura.getYear() % 100 != 0) || fecha_futura.getYear() % 400 == 0){
                                b = 29; //año bisiesto
                              } else {
                                b = 28; //año no bisiesto
                              }
                            } else if(fecha_pasada.getMonth() <= 7){ //meses hasta julio
                              if(fecha_pasada.getMonth() == 0){
                                b = 31;
                              } else if(fecha_pasada.getMonth() % 2 == 0){
                                b = 30;
                              } else {
                                b = 31;
                              }
                            }else if(fecha_pasada.getMonth() > 7){ //meses de Agosto a diciembre
                               if(fecha_pasada.getMonth() % 2 == 0){ //si el més es divisible entre dos tiene 31 dias
                                b = 31;
                              }else{
                                b = 30;
                              }
                            }
     
    //controlamos que la fecha de inicio no sea mayor que la fecha final
    if(fecha_pasada.getYear() > fecha_futura.getYear() || (fecha_pasada.getYear() == fecha_futura.getYear() && fecha_pasada.getMonth() > fecha_futura.getMonth) ||(fecha_pasada.getYear() == fecha_futura.getYear() && fecha_pasada.getMonth() == fecha_futura.getMonth() && fecha_futura.getDate() == fecha_pasada.getDate())){
         $('#total').html("La fecha de inicio ha de ser anterior a la fecha Actual");
         return false;
    }else{
            //si la fecha es correcta
      if(fecha_pasada.getMonth() <= fecha_futura.getMonth()){
        total_anhos = fecha_futura.getYear() - fecha_pasada.getYear();
        if(fecha_pasada.getDate() <= fecha_futura.getDate()){
           total_meses = fecha_futura.getMonth() - fecha_pasada.getMonth();
           total_dias = fecha_futura.getDate() - fecha_pasada.getDate();
        }else{
          if(fecha_futura.getMonth() == fecha_pasada.getMonth()){
            total_anhos = total_anhos - 1;
           }
          total_meses = (fecha_futura.getMonth() - fecha_pasada.getMonth() - 1 + 12) % 12;
          total_dias = b - (fecha_pasada.getDate() - fecha_futura.getDate());
        }
      }else{
        total_anhos = fecha_futura.getYear() - fecha_pasada.getYear() - 1;
         if(fecha_pasada.getDate() > fecha_futura.getDate()){
          total_meses = fecha_futura.getMonth() - fecha_pasada.getMonth() - 1 + 12;
          total_dias = b - (fecha_pasada.getDate() - fecha_futura.getDate());
        }else{
           total_meses = fecha_futura.getMonth() - fecha_pasada.getMonth() + 12;
           total_dias = fecha_futura.getDate() - fecha_pasada.getDate();
        }
      }
     
    }
     
    $('#total').html(total_anhos + " años, " + total_meses + " meses y " + total_dias + " días."); //devuelve el resultado
     
     event.preventDefault();//mantiene en pantalla el resultado anterior una vez generado
      });//final function event
    }//final function ready
    );//final ready
    </script></p>
    </body>
    </html>


 

 







¿Qué te ha parecido este post?

¡Haz clic en una estrella para calificarla!

Puntuación media 0 / 5. Recuento de votos: 0

¡No hay votos hasta ahora! Sé el primero en calificar esta publicación.

No te pierdas otros artículos ...

¡Síguenos en las redes sociales!

¡Lamentamos que esta publicación no te haya sido útil!

¡Permítanos mejorar esta publicación!

¿Cuéntanos cómo podemos mejorar esta publicación?

Deja una respuesta

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.