使用本地日期设置和获取 HTMLInputElement.valueAsDate 的正确方法是什么？答案

【问题标题】：What is the correct way to set and get HTMLInputElement.valueAsDate using local Dates?使用本地日期设置和获取 HTMLInputElement.valueAsDate 的正确方法是什么？
【发布时间】：2019-04-01 15:27:48
【问题描述】：

valueAsDate 的功能似乎存在根本缺陷：

var date1 = new Date();
date1 = new Date(date1.getFullYear(), date1.getMonth(), date1.getDate()); // input expects requires year, month, day

var input = document.createElement("input"); input.type = "date";

input.valueAsDate = date1;

var date2 = input.valueAsDate;

console.log(date1);
console.log(date2);

console.log(date1.getTime(), date2.getTime()); // EVEN THE UTC TIMESTAMP IS NOT EQUAL!!

我想设置一个本地日期，我想获得一个本地日期。如何在来回保持正确的日期类型（UTC 或本地）的同时始终实现这一点？

【问题讨论】：

我没有看到任何意外。输入去掉时间部分，只保留日期部分。
@Bergi valueAsDate 似乎预计 UTC，因此，如果我住在 GMT +1，那么在一天中的一个小时，日期部分会变得不同
这似乎是合理的。在这种情况下，使用UTC getter 方法来访问日期。如果您在其他地方显示当地时间，不幸的是，您需要“转换”。
@Bergi 是的，我目前不确定如何正确执行此操作 :)
相关：How do you parse a date from an HTML5 date input? 和 HTML input type date and time without timezone offset

标签： javascript html

【解决方案1】：

<input type="date"> 上显示的天数为 UTC 天数。如果您想将它们视为当地时间，则需要调整 Date 对象：

var date1 = new Date(); // now
var input = document.createElement("input"); input.type = "date";

input.valueAsDate = new Date(Date.UTC(date1.getFullYear(), date1.getMonth(), date1.getDate()));

var midnightUtcDate = input.valueAsDate;
var date2 = new Date(midnightUtcDate.getUTCFullYear(), midnightUtcDate.getUTCMonth(), midnightUtcDate.getUTCDate());

console.log(date1, date1.toLocaleDateString());
console.log(date2, date2.toLocaleDateString());

【讨论】：