Javascript - 从HTML输入中获取日期

Question

Javascript - 从HTML输入中获取日期

我目前正在尝试从HTML输入中获取值(下面)

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

Run Code Online (Sandbox Code Playgroud)

并把它放入一个javascript变量,所以我可以用它来做其他事情.我目前正在使用下面的代码.

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

Run Code Online (Sandbox Code Playgroud)

但是当我测试这些变量时,它告诉我输入是""而dateEntered是"无效日期".

我已经尝试了.valueAsDate而不仅仅是.value.当我测试它们时,它告诉我输入为空并且dateEntered是"Wed Dec 31 1969 19:00:00 GMT-0500(东部标准时间)",即使我输入今天的日期.

我如何解决这个问题,以便javascript变量实际反映我输入的日期？我使用谷歌浏览器作为我的浏览器.

编辑和更新 对于那些想要我的整个代码的人来说,缩进有点遗憾:

<!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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

lua*_*ped 12

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

Run Code Online (Sandbox Code Playgroud)

基本上你需要听取日期输入的变化,当前你试图获得负载值,当选择器没有日期时因此你得到'无效日期'

归档时间：	10 年，6 月前
查看次数：	24892 次
最近记录：	10 年，6 月前