Javascript - 从 HTML 输入中获取日期答案

【问题标题】：Javascript - get a date from an HTML inputJavascript - 从 HTML 输入中获取日期
【发布时间】：2026-01-15 01:15:02
【问题描述】：

我目前正在尝试从 HTML 输入中获取值（如下）

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

并将其放入 javascript 变量中，以便我可以将其用于其他事情。我目前正在使用下面的代码。

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

但是当我测试这些变量时，它告诉我 Input 是 "" 而 dateEntered 是 "Invalid Date"。

我也尝试过 .valueAsDate 而不仅仅是 .value。当我测试它们时，它告诉我 Input 为空并且 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>

【问题讨论】：

能贴出完整的JS代码吗？
你在什么时候设置这些变量？如果您在页面加载时设置它们，那么显然该值将为空。请展示一个完整的例子。
Converting string to date in js的可能重复
How do you parse a date from an HTML5 date input?的可能重复

标签： javascript html date input

【解决方案1】：

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'

【讨论】：

在用户输入 ISO 格式的日期之前，您的答案是正确的：YYYY-MM-DD 或 YYYY-MM-DDTHH:MM:SS 但 OP 没有指定格式
我假设日期将从输入类型“日期”修改，据我了解，除了 yyyy-mm-dd 之外没有其他格式提供它？？
@CY5 <input type="date"> 始终采用该格式。
@Juhana 很好的输入类型日期是 Chrome 支持的，它有很好的日期选择器所有这些东西.. 但在 Firefox 和 IE 10 中它不检查这个jsfiddle.net/73ebffud/1
@Arnatuile 您的日期格式错误 11/11/2015 chrome 接受日期 YYYY-MM-DD

【解决方案2】：

确保您的脚本在 DOM 完全加载后执行。为此，您可以将 JS 代码放在一个函数中，并在 DOM 加载后调用该函数，或者将您的 JS 代码放在页面末尾，就在 </body> 之前。

【讨论】：