1
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>