Javascript - 从HTML输入中获取日期 [英] Javascript - get a date from an HTML input
问题描述
我目前正在尝试从HTML输入中获取值（下方）
I am currently trying to take the value from an HTML input (below)
<input type="date" id="dateInput" />
并将其放入javascript变量中，以便我可以将其用于其他事情。我目前正在使用下面的代码。
and put it into a javascript variable so I can use it for other things. I currently am using the code below.
var input = document.getElementById("dateInput").value;
var dateEntered = new Date(input);
但是当我测试这些变量时，它告诉我输入是 和 dateEntered 是无效日期。
But when I test those variables, it tells me that Input is "" and dateEntered is "Invalid Date".
我也尝试过.valueAsDate而不仅仅是.value。当我测试它们时，它告诉我输入为空并且 dateEntered 是Wed Dec 31 1969 19:00:00 GMT-0500（东部标准时间）甚至虽然我输入了今天的日期。
I've tried the .valueAsDate instead of just .value as well. When I test those out, it tells me that Input is null and dateEntered is "Wed Dec 31 1969 19:00:00 GMT-0500 (Eastern Standard Time)" even though I entered today's date.
我如何解决这个问题，以便javascript变量实际反映我输入的日期？我使用谷歌浏览器作为我的浏览器。
How would I fix this so that the javascript variables actually reflect the date I enter? I am using Google Chrome as my browser.
编辑和更新
对于那些想要我的整个代码的人来说，缩进是一点点抱歉：
EDIT and UPDATE For those who wanted my whole code, indentation is a little off sorry:
<!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输入中获取日期的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
