Javascript-从HTML输入中获取日期_Javascript_Html_Date_Input

Javascript-从HTML输入中获取日期

javascript html date input

Javascript-从HTML输入中获取日期,javascript,html,date,input,Javascript,Html,Date,Input,我目前正在尝试从HTML输入中获取值（如下）但当我测试这些变量时，它告诉我输入是“”，输入的日期是“无效日期” 我尝试了.valueAsDate而不是.value。当我测试这些时，它告诉我输入为空，输入的日期是“Wed Dec 31 1969 19:00:00 GMT-0500（东部标准时间）”，即使我输入了今天的日期我该如何解决这个问题，使javascript变量实际上反映我输入的日期？我使用谷歌浏览器作为我的浏览器编辑和更新对于那些想要我的全部代码的人来说，缩进有点不合适。对不起：

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

但当我测试这些变量时，它告诉我输入是“”，输入的日期是“无效日期”

我尝试了.valueAsDate而不是.value。当我测试这些时，它告诉我输入为空，输入的日期是“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>


计算时间
计算时间
//此处的我的导航链接（已删除）
计算自输入日期起经过的时间。
输入日期
找时间
经过的时间是：

var输入；
输入var日期；
document.getElementById（“dateInput”）.addEventListener（“更改”，函数（）{
输入=此值；
dateEntered=新日期（输入）；
});
/*查找并显示时间流逝*/
函数lookUpTime（）{
//更多的代码将在稍后转到这里。
}
//添加事件侦听器以查找时间按钮并清除表单
函数createEventListener（）{
var submitButton=document.getElementById（“determineTime”）；
if（submitButton.addEventListener）{
addEventListener（“单击”，lookUpTime，false）；
}else if（submitButton.attachEvent）{
submitButton.attachEvent（“onclick”，lookUpTime）；
}
document.getElementById（“dateInput”）.value=“”；
//重新加载时清除最后一个起始值
document.getElementById（“时间”）.innerHTML=“”；
//重新加载时清除以前的结果
}
if（window.addEventListener）{
addEventListener（“加载”，createEventListener，false）；
}else if（窗口附件）{
attachEvent（“onload”，createEventListener）；
}

确保在DOM完全加载后执行脚本。要做到这一点，您可以将JS代码放在函数中，并在加载DOM后调用该函数，或者将JS代码放在页面的末尾，就在

之前

基本上，您需要监听日期输入的更改，当前您正试图获取加载的值，而选择器中没有日期，因此您会得到“无效日期”

您可以发布整个JS代码吗？在哪一点设置这些变量？如果将它们设置为页面加载，那么该值显然将为空。请给出一个完整的示例。可能重复的可能重复的井您的答案是正确的，直到用户以ISO格式输入日期：YYYY-MM-DD或YYYY-MM-DDTHH:MM:SS，但OP没有指定格式。我假设日期将从输入类型“日期”修改，据我所知，除了yyyy-mm-dd之外，没有其他格式可以提供它。@CY5

始终是这种格式。@Juhana well-input-type-date是Chrome支持的，它有很好的日期选择器所有这些东西。。但在firefox和IE 10中，它没有检查@Arnatuile您的日期格式是错误的2015年11月11日chrome接受日期YYYY-MM-DD

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

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

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