使用new Date()为datepicker赋值时出现日期超前问题求助

我之前也踩过这个一模一样的坑！你遇到的问题其实是<input type="date">的valueAsDate属性的时区特性导致的：

问题还原 #

你用这段代码给日期输入框设置当前日期：

document.getElementById('selFecha').valueAsDate = new Date();

对应的输入框是：

<input type='date' id='selFecha'>

明明控制台打印new Date()显示的是正确的本地日期，但输入框却显示次日日期。

问题原因 #

valueAsDate属性是基于UTC时间来处理Date对象的。举个例子：如果你的本地时区是西五区（比如美国东部时间），当本地时间是2024-05-20 23:00时，对应的UTC时间已经是2024-05-21 04:00了。这时候把本地的Date对象赋值给valueAsDate，浏览器会提取UTC的日期部分来显示，自然就变成了次日。

解决方法 #

直接手动拼接符合ISO格式（YYYY-MM-DD）的日期字符串，给输入框的value属性赋值，完全绕开时区转换的问题。你的解决思路是对的，完整代码可以这样写：

var fecha = new Date();
var d = fecha.getDate();
var m = fecha.getMonth() + 1; // 注意月份是从0开始计数的，必须+1
var y = fecha.getFullYear();

// 对小于10的日期和月份补零，确保格式符合要求
if (d < 10) { d = '0' + d; }
if (m < 10) { m = '0' + m; }

// 直接赋值给value属性
document.getElementById('selFecha').value = `${y}-${m}-${d}`;

这种方式下，浏览器会直接把字符串解析成本地日期，不会出现时区偏差的问题，完美显示当前本地日期。

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