个人中心
gpt4 book ai didi

Javascript - 从 HTML 输入中获取日期

转载 作者：太空狗 更新时间：2023-10-29 13:47:17 25 4
gpt4 key购买 nike

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

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

并将它放入一个 javascript 变量中，这样我就可以将它用于其他用途。我目前正在使用下面的代码。

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

但是当我测试这些变量时，它告诉我Input 是“”并且dateEntered 是“无效日期”。

我也尝试了 .valueAsDate 而不仅仅是 .value。当我测试这些时，它告诉我 Input 为空并且 dateEntered 是“Wed Dec 31 1969 19:00:00 GMT-0500(东部标准时间)”甚至尽管我输入了今天的日期。

我该如何解决这个问题，以便 javascript 变量实际反射(reflect)我输入的日期？我使用 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>

最佳答案 

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'

关于Javascript - 从 HTML 输入中获取日期，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33659508/

25 4 0
文章推荐： html - 的反向使用什么元素
文章推荐： Git Rebasing onto generated files(通过删除自动解决删除/更改冲突)
文章推荐： git - 逐步实现 'successful git branching model'
文章推荐： android - 在人行横道浏览器中多次单击任何按钮不起作用
太空狗
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com