Inicio Apuntes FPApuntes DAW 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

Publicado por entreunosyceros
Publicado el: Última actualización:

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>

 

 

También te puede interesar ...

Deja un comentario

* Al utilizar este formulario, aceptas que este sitio web almacene y maneje tus datos.

Resumen de privacidad
cookies entreunosyceros

Esta web utiliza cookies para que podamos ofrecerte la mejor experiencia de usuario posible.

La información de las cookies se almacena en tu navegador y realiza funciones tales como reconocerte cuando vuelves a nuestra web o ayudarnos a comprender qué secciones de la web encuentras más interesantes y útiles.

Nunca almacenamos información personal de ningún tipo.

Tienes toda la información sobre privacidad, derechos legales y cookies en nuestra página sobre la política de privacidad o en la página sobre nuestra política de cookies.

Cookies necesarias

Las cookies estrictamente necesarias tiene que activarse siempre para que podamos guardar tus preferencias de ajustes de cookies.

Si desactivas esta cookie no podremos guardar tus preferencias. Esto significa que cada vez que visites esta web tendrás que activar o desactivar las cookies de nuevo.

Cookies de terceros

Esta web utiliza las siguientes cookies adicionales:

- Mailchimp: Recordar si ya estás suscrito al boletín de noticias y sino ofrecértelo al salir.

- Accesibilidad: Para saber tus ajustes de accesibilidad en cada visita.

- Comentarios: Saber si has leído y aceptado nuestra política de privacidad a la hora de dejar un comentario en la web.

- Google Analytics: Localización para recopilar información anónima tal como el número de visitantes del sitio, o las páginas más populares.

- Goggle Adsense: Anuncios personalizados según tu geolocalización y preferencias.

Dejar estas cookies activadas nos permite mejorar nuestra web.

Adblock Detectado!!

Ayúdanos deshabilitando la extensión AdBlocker de tu navegador para visitar esta web.
Si no sabes hacerlo en Chrome, consulta el siguiente enlace. Si utilizas Firefox, puedes consultar este otro enlace.
Esto mejorará tu experiencia en este sitio web.