使用输入中的 .valueAsNumber 时日期无效答案

【问题标题】：Invalid Date when using .valueAsNumber from inputs使用输入中的 .valueAsNumber 时日期无效
【发布时间】：2018-09-01 05:31:39
【问题描述】：

var yearInput = document.getElementById('year');
var monthInput = document.getElementById('month');
var dateInput = document.getElementById('date');
var start = new Date(yearInput.valueAsNumber, monthInput.valueAsNumber - 1, dateInput.valueAsNumber);
var end = new Date(2018, 02 - 1, 14);
var show = function(){document.getElementById("demo").innerHTML = start;}
var coded = function(){document.getElementById("demo").innerHTML = end;}

<h2>Date Calc</h2>
<br>
Year
<input id = "year" type = number >
<br>
Month
<input id = "month" type = number >
<br>
Date
<input id = "date" type = number >
<br>
<button onclick="show();">Inputs</button>
<button onclick="coded();">Coded Date</button>
<p id="demo"></p>

当尝试从 HTML 中给出的输入（类型 = 数字）创建新日期时，

var yearInput = document.getElementById('year');
var monthInput = document.getElementById('month');
var dateInput = document.getElementById('date');

我使用这些变量作为创建新日期的参数

var start = new Date(yearInput.valueAsNumber, monthInput.valueAsNumber - 1, dateInput.valueAsNumber);

返回“无效日期”。

但是，使用数字就可以了。

var end = new Date(2018, 02 - 1, 14);

返回 2018 年 2 月 14 日星期三 00:00:00 GMT-0500（东部标准时间）

唯一改变的是参数。它们有什么不同？

【问题讨论】：

您是否在您的<input> 上设置了type="number"？如果没有，.valueAsNumber 返回NaN（至少在 chrome 中，我没有看到记录在案的developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement）
这里有很多关于 valueAsNumber 返回NaN 或undefined 的答案。请在发布前浏览 SO。
输入类型设置为数字。我也没有收到NaN 或undefined。我收到Invalid Date。我还没有在网站上找到任何其他有用的答案。我不明白如何使用 valueAsNumber 不起作用，但代码中的实际数字却起作用。我已经运行了调试器，似乎值是数字，所以我看不出它应该有什么不同。
你能用 html/css/js sn-p 编辑器在 SO 上重现错误吗？
我已经为每个场景添加了带有按钮的 sn-p。

标签： javascript html date

【解决方案1】：

在更改任何输入值之前，您的 JavaScript 将首先运行并将值保存到变量 start。

每次您单击 inputs 按钮时，它都会使用 JavaScript 首次运行时保存的 start 的原始值。

您需要进行更新，以便每次点击 Inputs 获得 day、month、year 的当前值>，然后计算一个新版本的start，然后更新HTML。

var end = new Date(2018, 02 - 1, 14);
var show = function(){
  var yearInput = document.getElementById('year');
  var monthInput = document.getElementById('month');
  var dateInput = document.getElementById('date');
  var start = new Date(yearInput.valueAsNumber, monthInput.valueAsNumber - 1, dateInput.valueAsNumber);  
  document.getElementById("demo").innerHTML = start;
}
var coded = function(){document.getElementById("demo").innerHTML = end;}

<h2>Date Calc</h2>
<br>
Year
<input id = "year" type = number >
<br>
Month
<input id = "month" type = number >
<br>
Date
<input id = "date" type = number >
<br>
<button onclick="show();">Inputs</button>
<button onclick="coded();">Coded Date</button>
<p id="demo"></p>

【讨论】：