如何将日期输入和时间输入视为本地时间，而不是通用时间？

Question

用户输入2019-12-22 的日期输入会给出以下值：

• input.value: "2019-12-22"
• input.valueAsNumber: 1576972800000
• input.valueAsDate: "Sat Dec 21 2019 16:00:00 GMT-0800 (Pacific Standard Time)"
  • 这个结果日期对象似乎是错误的
  • 当浏览器返回一个值时，它会将用户输入视为世界时
  • 所以日期对象的 utc 表示与输入显示给用户的相同
  • input.valueAsDate.getUTCDate() 返回 22，这是用户输入的内容
  • input.valueAsDate.getDate() 返回 21，而不是用户输入的内容
  • 因此我们得出结论，日期输入显示并接受 utc 时间，而不是当地时间

我们希望生成的 date.toString() 显示与日期输入中原始用户输入相同的结果

我们如何让用户与当地时间进行交互，然后在我们的脚本中获取正确的日期对象？

Answer 1

此问题是由 TC-39 决定将仅限日期的 ISO 8601 格式时间戳视为 UTC 造成的，而此时与 ISO 8601 保持一致并将它们视为本地更合乎逻辑。见Why does Date.parse give incorrect results?

简单的解决方案是手动解析字符串，不要使用内置解析器，作为至少一种当前实现，直到最近将 YYYY-MM-DD 解析为本地。此外，不要使用当前时区偏移量来调整时间值，因为这不允许偏移量的历史变化或可能的夏令时变化。

// Parse timestamp in YYYY-MM-DD format as local
function parseISOLocal(s) {
  let [y, m, d] = s.split(/\D/);
  return new Date(y, --m, d);
}

// Format date as YYYY-MM-DD local
function formatISOLocal(d) {
  let z = n => (n<10?'0':'') + n;
  return d.getFullYear() + '-' + z(d.getMonth()+1) + '-' + z(d.getDate());
}

let s = '2019-12-22';
let d = parseISOLocal(s);
console.log( d.toString());
console.log( formatISOLocal(d));

编辑

如果支持输入类型日期并且 YYYY-MM-DD 根据 ECMA-262 解析为 UTC，您可以使用 valueAsDate 和 UTC 方法。但是，并非所有浏览器都支持日期输入类型，并且并非所有解析器都会将该格式解析为 UTC。

不依赖输入类型日期并手动解析值，检查格式和有效性要可靠得多。这就是为什么通常使用日期小部件和库而不是内置日期功能的原因之一。

let inp = document.getElementById('dob');
let dobObj = inp.valueAsDate;
let dobStr = inp.value;

console.log('Value as date: ' + dobObj);   // Safari: null
console.log('Value as string: ' + dobStr); // 2018-06-15

<input id="dob" type="date" value="2018-06-15">

Answer 2

由于日期/时间输入元素接受用户输入为 UTC 时间，但我们想接受本地时间，我们必须手动补偿用户计算机上配置的本地时区偏移量

所以我们接受输入值作为数字，但在使用它创建 Date 对象之前将其偏移时区偏移量

// ascertain the timezone offset
const timeOffset = (new Date()).getTimezoneOffset() * 60 * 1000

// compensate for the weirdness
const milliseconds = input.valueAsNumber + timeOffset

// make a real date object
const date = new Date(milliseconds)

当通过toString() 或toLocaleDateString() 向用户显示时，生成的日期对象将与用户最初输入的时间相同。