如何阻止浏览器转换datetime-local输入的日期时间至本地时区？

问题的核心在于：当你用new Date()去解析datetime-local输入框的value时，浏览器会把这个ISO格式的字符串默认当作UTC时间，然后转换为本地时区的Date实例，导致你拿到的时间不是原始输入的内容。要完全保留用户输入的时间，根本不需要把值转换成Date对象——直接操作原始的字符串就能实现。

为什么你的原有代码会出问题？ #

datetime-local输入框的value本质是一个不带时区的ISO 8601格式字符串（比如2024-05-20T14:30:00），这个字符串完全对应用户输入的时间。但当你用new Date(isoString)解析它时，浏览器会自动将其视为UTC时间，然后转换为你的本地时区，所以后续用getHours()、getDate()等方法拿到的都是转换后的本地时间，而非原始输入值。

正确的解决方案：直接处理原始字符串 #

我们可以直接读取输入框的value字符串，拆分后重组为你需要的dd/mm/yyyy HH:MM:ss格式，全程不碰Date对象，彻底避免时区转换：

<input type='datetime-local' class="form-control" step="1" id="startRange" />
<input type='datetime-local' class="form-control" step="1" id="endRange" />

// 直接获取输入框的原始ISO格式值，不转换为Date
const startRawValue = document.getElementById("startRange").value;
const endRawValue = document.getElementById("endRange").value;

// 格式化函数：将ISO字符串转为dd/mm/yyyy HH:MM:ss
function formatRawDateTime(isoDateTime) {
  if (!isoDateTime) return ""; // 处理未输入的空值情况
  
  // 拆分ISO字符串：YYYY-MM-DDTHH:mm:ss
  const [dateSegment, timeSegment] = isoDateTime.split('T');
  const [year, month, day] = dateSegment.split('-');
  const [hours, minutes, seconds] = timeSegment.split(':');
  
  // 重组为目标格式
  return `${day}/${month}/${year} ${hours}:${minutes}:${seconds}`;
}

// 得到完全匹配原始输入的格式化结果
const startRangeDate = formatRawDateTime(startRawValue);
const endRangeDate = formatRawDateTime(endRawValue);

console.log(startRangeDate); // 输出和输入完全一致的时间，无时区偏差
console.log(endRangeDate);

额外说明 #

• datetime-local的value始终会以YYYY-MM-DDTHH:mm:ss的格式存储，完全对应用户输入的时间，没有时区信息——这意味着只要你直接操作这个字符串，就能100%保留原始输入。
• 如果后续需要处理时区相关的逻辑，才需要用到Date对象；但如果只是要保留用户输入的时间展示或提交，直接操作字符串是最可靠的方式。

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