为何input date类型的.valueAsDate返回输入日期的前一天？

这个问题我之前踩过坑！本质是时区差异在搞鬼，咱们一步步拆解原因和解决办法：

问题根源 #

当你在<input type="date">里选择一个日期（比如2024-05-20），它的.value返回的是不带时区的YYYY-MM-DD字符串，但.valueAsDate会把这个字符串解析成UTC时区的午夜0点（也就是2024-05-20T00:00:00Z）。

如果你的本地时区在UTC以东（比如中国是UTC+8），这个UTC时间转换为本地时间就是前一天的16:00:00（2024-05-19T16:00:00+08:00）。当你直接把这个Date对象输出时，浏览器会显示本地时区的时间，看起来就像是前一天的日期。

解决办法 #

有两种常用的方式来修正这个问题：

1. 基于本地时区手动构造Date对象 #

把输入的日期字符串拆成年、月、日，用new Date(year, month-1, day)创建Date对象——这个构造方法会基于本地时区生成午夜0点的时间，避免时区转换问题：

var result = function(){ 
  var dateStr = document.getElementById('result').value; 
  if (!dateStr) {
    document.getElementById('date').innerHTML = '未选择日期';
    document.getElementById('dateAsDate').innerHTML = '未选择日期';
    return;
  }
  // 拆分日期字符串
  const [year, month, day] = dateStr.split('-');
  // 注意月份是0开始的，所以要减1
  const localDate = new Date(year, month - 1, day);

  document.getElementById('date').innerHTML = dateStr; 
  document.getElementById('dateAsDate').innerHTML = localDate.toLocaleDateString();
}

2. 提取UTC日期部分 #

如果一定要用.valueAsDate，可以把它转成ISO字符串后截取日期部分，这样就能得到和输入一致的日期：

var result = function(){ 
  var dateStr = document.getElementById('result').value; 
  var dateAsDate = document.getElementById('result').valueAsDate; 

  document.getElementById('date').innerHTML = dateStr || '未选择日期'; 
  // 提取ISO字符串的日期部分（YYYY-MM-DD）
  document.getElementById('dateAsDate').innerHTML = dateAsDate ? dateAsDate.toISOString().split('T')[0] : '未选择日期';
}

验证一下 #

比如你选择2024-05-20，用第一种方法得到的本地Date对象在UTC+8时区就是2024-05-20T00:00:00+08:00，输出的日期就是正确的；第二种方法截取ISO字符串的前10位，直接得到2024-05-20，也和输入一致。

内容的提问来源于stack exchange，提问作者Davis Leonard