web-dev-qa-db-ja.com

JavaScript-HTML入力から日付を取得する

現在、HTML入力から値を取得しようとしています（以下）。

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

それをjavascript変数に入れて、他のものに使用できるようにします。現在、以下のコードを使用しています。

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

しかし、これらの変数をテストすると、 入力 「」であり、 dateEntered 「無効な日付」です。

同様に.valueの代わりに.valueAsDateも試しました。それらをテストしてみると、 入力 nullであり、 dateEntered 今日の日付を入力しても、「1969年12月31日水曜日19:00:00 GMT-0500（東部標準時）」です。

Javascript変数が実際に入力した日付を反映するように、これをどのように修正しますか？私はブラウザとしてGoogle Chromeを使用しています。

編集と更新 私のコード全体が欲しかった人にとって、インデントは少し残念です。

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

基本的に、日付入力の変更をリッスンする必要があります。現在、ピッカーに日付がないため、ロード時に値を取得しようとしていたため、「無効な日付」を取得します。

13
luanped