如何使<input type="datetime-local">控件显示为本地时区？

首先明确：<input type="datetime-local">的原生设计是，输入框显示的是本地时区的时间，但valueAsDate方法会把输入的YYYY-MM-DDTHH:mm字符串当作UTC时间来解析，再转换为你的本地时区（UTC+1），这就导致了你看到的时间偏移。

要让输入的时间和获取到的Date对象严格对应本地时区，你需要手动处理输入值，而不是依赖valueAsDate：

• 获取输入值时：直接读取currentTarget.value拿到无时区的时间字符串，然后用Date构造函数的年/月/日/时/分参数来创建本地时间对象，避免UTC解析：

function handleDateTimeChange(e) {
  const datetimeStr = e.currentTarget.value;
  if (!datetimeStr) return;
  
  // 拆分字符串为年、月、日、时、分
  const [datePart, timePart] = datetimeStr.split('T');
  const [year, month, day] = datePart.split('-').map(Number);
  const [hours, minutes] = timePart.split(':').map(Number);
  
  // Date构造函数的月份是0-11，所以要减1
  const localDate = new Date(year, month - 1, day, hours, minutes);
  console.log(localDate); // 输出 Sat Dec 24 2022 12:00:00 GMT+0100 (Central European Standard Time)
}

• 设置输入框值时：如果需要把本地Date对象赋值给输入框，也要手动格式化为YYYY-MM-DDTHH:mm字符串，避免时区转换：

function setLocalDateTime(inputEl, localDate) {
  const year = localDate.getFullYear();
  const month = String(localDate.getMonth() + 1).padStart(2, '0');
  const day = String(localDate.getDate()).padStart(2, '0');
  const hours = String(localDate.getHours()).padStart(2, '0');
  const minutes = String(localDate.getMinutes()).padStart(2, '0');
  
  inputEl.value = `${year}-${month}-${day}T${hours}:${minutes}`;
}

核心逻辑就是绕开valueAsDate的UTC解析逻辑，直接基于本地时区来处理时间字符串和Date对象的转换。

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