Calculate Elapsed Time Based On User Input Javascript

Question

Basically, I'm trying to have a user input a date in the form of mm/dd/yyyy. It can be any date, but they have to select it. What I want to do is calculate the number of years, months, and days that have elapsed since the date they entered. I've got it to the point where they can select a date, but beyond that, I'm stumped. Here's what I've got:

<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<Title>Elapsed Time Calculator</Title>
<script src="modernizr.custom.05819.js"></script><!--Links to file containing modernizer library-->

<body>
<!-- Navigation -->
    <nav>
      <ul class="w3-navbar w3-black">
        <li><a href="file:///C:/Users/Kyle/Desktop/Document1.html">Home</a></li> <!--Link to Home Page-->
        <li><a href="file:///C:/Users/Kyle/Desktop/Document2.html">NHL Teams</a></li><!--Link to Page of NHL Teams-->
        <li><a href="file:///C:/Users/Kyle/Desktop/Document3.html">AHL Teams</a></li><!--Link to Page of AHL Teams-->
        <li><a href="file:///C:/Users/Kyle/Desktop/Document4.html">WHL Teams</a></li><!--Link to Page of WHL Teams-->
        <li><a href="file:///C:/Users/Kyle/Desktop/Document5.html">G.A.A. Calculator</a></li><!--Link to Page of WHL Teams-->
        <li><a href="file:///C:/Users/Kyle/Desktop/Document6.html">Fan Survey</a></li><!--Link to Fan Survey Page-->
        <li><a href="file:///C:/Users/Kyle/Desktop/Document7.html">Web Safety</a></li><!--Link to Page about Web Safety-->
        <li><a href="file:///C:/Users/Kyle/Desktop/Document8.html">Elapsed Time</a></li><!--Link to Page That Calculates Elapsed Time Between Two Dates-->
      </ul>
    </nav>
    <header>
             <h1 style="text-align:center;">Elapsed Time</h1>
    </header>
    <article>
        <form>
          <fieldset>
            <label for="dateSelected">
              Select a date
            </label>
            <input type="date" id="dateSelected" />
          </fieldset>
          <label for "timeElapsed"> Time Elapsed: </label>

          </form>
</article>
</body>
</html>

If I remember right, the way you'd go about this is convert the date to milliseconds, and convert from that number, but I'm not quite sure how to go about doing that when it comes to user inputted data. Can anybody help?

Did you search for calculate the difference between two dates with JavaScript? — epascarello, Feb 13 '17 at 00:09
I did, but I never found any real mention of taking a user inputed date. — J.Doe, Feb 13 '17 at 00:10
The value is a string, read the string, set it with `new Date()` — epascarello, Feb 13 '17 at 00:11
Probably a duplicate of [*How to get the difference of two dates in mm-dd-hh format in Javascript*](http://stackoverflow.com/questions/35504942/how-to-get-the-difference-of-two-dates-in-mm-dd-hh-format-in-javascript). Simple conversion to milliseconds, then to days, etc. doesn't work because not all days are 24 hours long, and months and years are of unequal lengths. — RobG, Feb 13 '17 at 00:42

score 0 · Answer 1 · edited May 23 '17 at 11:53

0

Create a new Date using one of the methods described here http://www.w3schools.com/js/js_dates.asp then use code from this question Calculate time difference between two times javascript

edited May 23 '17 at 11:53

Community

1
1

answered Feb 13 '17 at 00:03

Usmiech

181
3
12

This should be a comment. Much better to reference [*EMCA-262*](http://ecma-international.org/ecma-262/7.0/index.html#sec-date-objects) or [*MDN*](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date). – RobG Feb 13 '17 at 02:46

Calculate Elapsed Time Based On User Input Javascript

1 Answers1