<input type='datetime-local'>时间显示与预期不一致的原因及解决方法

复现代码

HTML 部分：

<h1> Datetime-local 异常演示: </h1>
<input type="datetime-local" id="datetime" />
<input type="text" id="expected" />

JS 部分：

const datetime = document.getElementById('datetime');
const expected = document.getElementById('expected');
const date = new Date();
date.setMilliseconds(0)
datetime.valueAsNumber = date;
expected.value = date.toLocaleString();

问题成因 #

• input[type=datetime-local] 的 valueAsNumber 属性接收 Unix 时间戳后，会将时间戳转换为 UTC 时区 的时间进行展示，不会适配当前设备的本地时区。
• Date.toLocaleString() 方法默认以当前设备的 本地时区 为基准输出格式化时间，二者时区基准不统一，最终展示的时间差值等于本地时区与 UTC 时区的偏移量。

解决方案 #

提供两种可选实现方式：

方式1：调整时间戳适配UTC展示逻辑 #

通过补充时区偏移量的方式，让datetime-local展示的UTC时间和实际本地时间一致：

const datetime = document.getElementById('datetime');
const expected = document.getElementById('expected');
const date = new Date();
date.setMilliseconds(0);
// 补充时区偏移的毫秒数，适配datetime-local的UTC展示规则
datetime.valueAsNumber = date.getTime() + date.getTimezoneOffset() * 60 * 1000;
expected.value = date.toLocaleString();

方式2：直接赋值格式化后的本地时间字符串 #

手动将本地时间拼接为datetime-local支持的YYYY-MM-DDTHH:mm格式，无需计算时区偏移，兼容性更好：

const datetime = document.getElementById('datetime');
const expected = document.getElementById('expected');
const date = new Date();
date.setMilliseconds(0);
// 补零处理后拼接为标准格式
const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, '0');
const day = String(date.getDate()).padStart(2, '0');
const hour = String(date.getHours()).padStart(2, '0');
const minute = String(date.getMinutes()).padStart(2, '0');
datetime.value = `${year}-${month}-${day}T${hour}:${minute}`;
expected.value = date.toLocaleString();

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