Calcul du temps écoulé à partir du formulaire en JavaScript

Question

Je travaille sur une calculatrice à temps écoulé où l'utilisateur saisit un mois, un jour et une année. À partir de leur entrée et de la date actuelle, je veux calculer combien de jours se situent entre les deux et afficher combien d'années, de mois et de jours se sont écoulés. J'ai commencé par créer un formulaire avec trois valeurs d'entrée "mois", "jour" et "année". Je me suis alors mis sur le script:

function timeElapsed() { 
     var timeMonth = document.getElementById("month"); 
     var timeDay = document.getElementById("day"); 
     var timeYear = document.getElementById("year"); 
     var currentDate = new Date(); 
     var elapsed = 
     document.getElementById("timeElapsed").innerHTML = elapsed; 
    } 
     //Event Listener 
     var submitButton= document.getElementById("sButton"); 
    if (submitButton.addEventListener) { 
     submitButton.addEventListener("click", timeElapsed, false); 
    } else if (submitButton.attachEvent) { 
     submitButton.attachEvent("onclick", timeElapsed); 
    } 

Il est évident que vous pouvez dire que je sorte d'arrêté parce que je suis perplexe sur l'endroit où aller d'ici. C'est un laboratoire à l'école pour moi et je veux juste comprendre comment le faire. Mon professeur a mentionné "Notez que votre programme doit inclure du code pour convertir les valeurs du jour de plus de 31 en mois, et les mois de plus de 12 en années." et je suis vraiment totalement confus, mais comprend ce qu'il veut dire. C'est juste en train de comprendre comment faire cela. C'est un cours en ligne et il est très difficile à comprendre à partir d'un manuel. J'ai regardé un peu en ligne mais je n'ai rien trouvé qui soit utile pour ma situation. Si vous pouvez m'aider, merci beaucoup.

Answer 1

En javascript vous pouvez obtenir la date actuelle comme

var currentDate = new Date(); 
var currentMonth = currentDate.getMonth() + 1; // as it starts from 0 
var currentDay = currentDate.getDate(); 
var currentYear = currentDate.getFullYear(); 

Après avoir obtenu des valeurs de vos champs de date d'entrée que vous devez faire des opérations mathématiques de base comme

if(currentMonth < inputMonth) { 
    monthBetween = inputMonth - currentMonth; 
} else if(currentMonth > inputMonth) { 
    monthBetween = currentMonth - inputMonth; 
} else { 
    monthBetween = 0; 
} 

Voici quelques exemples de code, vous pouvez jouer et apprendre de. https://jsfiddle.net/8pd5f3pe/1/

Answer 2

Voici un example que vous pouvez utiliser pour calculer la date différence

function get(ID){ 
 
    return document.getElementById(ID); 
 
} 
 

 
function calculateDiff(){ 
 
    var FromYear \t = get('FromYear').value; 
 
    var FromMonth = get('FromMonth').value; 
 
    var FromDay \t = get('FromDay').value; 
 

 
    var ToYear \t = get('ToYear').value; 
 
    var ToMonth \t = get('ToMonth').value; 
 
    var ToDay \t = get('ToDay').value; 
 
\t 
 
    var date1 \t = new Date(FromYear,FromMonth,FromDay); /*Create Date Object From date*/ 
 
    var date2 \t = new Date(ToYear,ToMonth,ToDay);   /*Create Date Object To date*/ 
 
    var diff \t = new Date(date2.getTime() - date1.getTime()); 
 

 
    get('ResultYear').value = diff.getUTCFullYear()-1970; /*Calculate year difference*/ 
 
    get('ResultMonth').value = diff.getUTCMonth();   /*Count month difference*/ 
 
    get('ResultDay').value = diff.getUTCDate()-1;   /*Count day difference*/ 
 
} 
 

 
calculateDiff(); 
 

 
var calculate = get('calculate'); 
 

 
calculate.onclick = function(){ 
 
    calculateDiff(); 
 
}

table input{ 
 
    width: 60px; 
 
} 
 
button{ 
 
    width: 80%; 
 
    margin: 10px auto; 
 
}

<table border="1"> 
 
    <tbody> 
 
    <tr class="header"> 
 
     <th>&nbsp;</th> 
 
     <th>YYYY</th> 
 
     <th>MM</th> 
 
     <th>DD</th> 
 
    </tr> 
 
    <tr> 
 
     <th>FROM</th> 
 
     <td><input id="FromYear" placeholder="YYYY" value="2017"></td> 
 
     <td><input id="FromMonth" placeholder="MM" value="3"></td> 
 
     <td><input id="FromDay" placeholder="DD" value="18"></td> 
 
    </tr> 
 
    <tr> 
 
     <th>TO</th> 
 
     <td><input id="ToYear" placeholder="YYYY" value="2017"></td> 
 
     <td><input id="ToMonth" placeholder="MM" value="3"></td> 
 
     <td><input id="ToDay" placeholder="DD" value="29"></td> 
 
\t </tr> 
 
    <tr> 
 
     <th colspan="4"> 
 
     <button id="calculate">Calculate</button> 
 
     </th> 
 
    </tr> 
 
    <tr> 
 
     <th>RESULT</th> 
 
     <td><input id="ResultYear" placeholder="YYYY" value=""></td> 
 
     <td><input id="ResultMonth" placeholder="MM" value=""></td> 
 
     <td><input id="ResultDay" placeholder="DD" value=""></td> 
 
    </tr> 
 
    </tbody> 
 
</table>