title: Javascript - get a date from an HTML input
body: <p>I am currently trying to take the value from an HTML input (below)</p>
  
  <pre><code>&lt;input type="date" id="dateInput" /&gt;
  </code></pre>
  
  <p>and put it into a javascript variable so I can use it for other things. I currently am using the code below.</p>
  
  <pre><code>    var input = document.getElementById("dateInput").value;
      var dateEntered = new Date(input);
  </code></pre>
  
  <p>But when I test those variables, it tells me that <i>Input</i> is "" and <i>dateEntered</i> is "Invalid Date".</p>
  
  <p>I've tried the .valueAsDate instead of just .value as well. When I test those out, it tells me that <i>Input</i> is null and <i>dateEntered</i> is "Wed Dec 31 1969 19:00:00 GMT-0500 (Eastern Standard Time)" even though I entered today's date.</p>
  
  <p>How would I fix this so that the javascript variables actually reflect the date I enter? I am using Google Chrome as my browser.</p>
  
  <p><b>EDIT and UPDATE</b>
  For those who wanted my whole code, indentation is a little off sorry:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
     &lt;meta charset="utf-8" /&gt;
     &lt;meta name="viewport" content="width=device-width,initial-scale=1.0"&gt;
     &lt;title&gt;Calculate Time&lt;/title&gt;
     &lt;link rel="stylesheet" href="styles.css" /&gt;  
     &lt;script src="modernizr.custom.05819.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
     &lt;header&gt;
        &lt;h1&gt; Calculate Time &lt;/h1&gt;
     &lt;/header&gt;
     &lt;article align="center"&gt;
        &lt;div id="cities"&gt;
            // My navigation links here (REMOVED)
        &lt;/div&gt;
    &lt;div id="caption"&gt;
       Calculate the time elapsed since a date entered.
    &lt;/div&gt;
     &lt;div class="box"&gt;
         &lt;article&gt;
             &lt;form&gt;
                 &lt;fieldset&gt;
                     &lt;label for="dateEntered"&gt;
                         Enter a Date
                     &lt;/label&gt;
                     &lt;input type="date" id="dateInput" /&gt;
                 &lt;/fieldset&gt;
                 &lt;fieldset class="button"&gt;
                     &lt;button type="button" id="determineTime"&gt;Find Time&lt;/button&gt;
                 &lt;/fieldset&gt;
                 &lt;fieldset&gt;
                     &lt;p&gt;Time Elapsed is:&lt;/p&gt;
                     &lt;p id="time"&gt;&lt;/p&gt;
                 &lt;/fieldset&gt;
             &lt;/form&gt;
         &lt;/article&gt;
     &lt;/div&gt;
     &lt;div id="map"&gt;&lt;/div&gt;
    &lt;/article&gt;
      &lt;script&gt;
          var input;
          var dateEntered;
  
          document.getElementById("dateInput").addEventListener("change", function () {
          input = this.value;
          dateEntered = new Date(input);
          });
  
      /* find and display time elapse */
      function lookUpTime() {
          // More code will go here later.
      }
  
      // add event listener to Find time button and clear form
      function createEventListener() {
          var submitButton = document.getElementById("determineTime");
          if (submitButton.addEventListener) {
              submitButton.addEventListener("click", lookUpTime, false);
          } else if (submitButton.attachEvent) {
              submitButton.attachEvent("onclick", lookUpTime);
          }
          document.getElementById("dateInput").value = "";
          // clear last starting value on reload
          document.getElementById("time").innerHTML = "";
          // clear previous results on reload
      }
  
      if (window.addEventListener) {
          window.addEventListener("load", createEventListener, false);
      } else if (window.attachEvent) {
          window.attachEvent("onload", createEventListener);
      }
  &lt;/script&gt;
  &lt;script src="script.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>