Javascript - get a date from an HTML input

Question

I am currently trying to take the value from an HTML input (below)

<input type="date" id="dateInput" />

and put it into a javascript variable so I can use it for other things. I currently am using the code below.

    var input = document.getElementById("dateInput").value;
    var dateEntered = new Date(input);

But when I test those variables, it tells me that Input is "" and dateEntered is "Invalid Date".

I've tried the .valueAsDate instead of just .value as well. When I test those out, it tells me that Input is null and dateEntered is "Wed Dec 31 1969 19:00:00 GMT-0500 (Eastern Standard Time)" even though I entered today's date.

How would I fix this so that the javascript variables actually reflect the date I enter? I am using Google Chrome as my browser.

EDIT and UPDATE For those who wanted my whole code, indentation is a little off sorry:

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width,initial-scale=1.0">
   <title>Calculate Time</title>
   <link rel="stylesheet" href="styles.css" />  
   <script src="modernizr.custom.05819.js"></script>
</head>
<body>
   <header>
      <h1> Calculate Time </h1>
   </header>
   <article align="center">
      <div id="cities">
          // My navigation links here (REMOVED)
      </div>
  <div id="caption">
     Calculate the time elapsed since a date entered.
  </div>
   <div class="box">
       <article>
           <form>
               <fieldset>
                   <label for="dateEntered">
                       Enter a Date
                   </label>
                   <input type="date" id="dateInput" />
               </fieldset>
               <fieldset class="button">
                   <button type="button" id="determineTime">Find Time</button>
               </fieldset>
               <fieldset>
                   <p>Time Elapsed is:</p>
                   <p id="time"></p>
               </fieldset>
           </form>
       </article>
   </div>
   <div id="map"></div>
  </article>
    <script>
        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);
    }
</script>
<script src="script.js"></script>
</body>
</html>

At which point do you set those variables? If you set them at page load, then obviously the value will be empty. Show a complete example please. — JJJ
– JJJ, Commented Nov 11, 2015 at 20:50
Possible duplicate of How do you parse a date from an HTML5 date input? — Liam
– Liam, Commented Sep 10, 2018 at 10:48

luanped · Accepted Answer · 2015-11-11 20:55:07Z

25

document.getElementById("dateInput").addEventListener("change", function() {
    var input = this.value;
    var dateEntered = new Date(input);
    console.log(input); //e.g. 2015-11-13
    console.log(dateEntered); //e.g. Fri Nov 13 2015 00:00:00 GMT+0000 (GMT Standard Time)
});

Basically you need to listen for the change of your date input, currently you were trying to get the value on load, when the picker has no date in it hence you get 'Invalid Date'

edited Nov 11, 2015 at 20:55

answered Nov 11, 2015 at 20:49

luanped

3,1982 gold badges30 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

18 Comments

CY5 Over a year ago

well your answer is correct till user enter Date in ISO format: YYYY-MM-DD or YYYY-MM-DDTHH:MM:SS but the OP haven't specifed the format

luanped Over a year ago

I assumed the date will be modified from the input type 'date', and from my understanding there is no way to provide it in other formats other than yyyy-mm-dd ??

JJJ Over a year ago

@CY5 <input type="date"> is always in that format.

CY5 Over a year ago

@Juhana well input type date is what Chrome support which has good datepicker all that stuff.. but in firefox and IE 10 its not check this out jsfiddle.net/73ebffud/1

CY5 Over a year ago

@Arnatuile your format of Date is wrong 11/11/2015 chrome accept the date YYYY-MM-DD

|

Collectives™ on Stack Overflow

Javascript - get a date from an HTML input

1 Answer 1

18 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

18 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related