web-dev-qa-db-fra.com

Javascript - obtenir une date à partir d'une entrée HTML

J'essaie actuellement de prendre la valeur d'une entrée HTML (ci-dessous)

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

et le mettre dans une variable javascript afin que je puisse l'utiliser pour d'autres choses. J'utilise actuellement le code ci-dessous.

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

Mais quand je teste ces variables, cela me dit que Contribution est et date entrée est "Date invalide".

J'ai également essayé le .valueAsDate au lieu du .value. Quand je les teste, ça me dit que Contribution est nul et date entrée est "Mer 31 déc 1969 19:00:00 GMT-0500 (heure normale de l'Est)" même si j'ai entré la date d'aujourd'hui.

Comment pourrais-je résoudre ce problème afin que les variables javascript reflètent réellement la date que j'entre? J'utilise Google Chrome comme navigateur.

MODIFIER et METTRE À JOUR Pour ceux qui voulaient tout mon code, l'indentation est un peu désolée:

<!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>
javascripthtmldateinput
10
Arnatuile
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)
});

Fondamentalement, vous devez écouter le changement de votre entrée de date, actuellement vous tentiez d'obtenir la valeur en charge, lorsque le sélecteur n'a pas de date, vous obtenez donc 'Invalid Date'

13
luanped