Vue3中如何为datetime-local输入框绑定正确的日期时间？

问题原因 #

你碰到的时间早2小时问题，核心是toISOString()返回的是UTC标准时间，但<input type="datetime-local">控件要求的是本地时区的ISO格式字符串（格式为YYYY-MM-DDTHH:mm），两者的时区差导致了显示的时间偏移。

解决方案 #

不需要复杂的字符串处理，直接生成符合要求的本地时间格式即可：

方法1：手动构建本地时间字符串

直接基于Date对象的本地时间方法拼接出格式匹配的字符串：

const getLocalDatetimeString = () => {
  const now = new Date();
  const year = now.getFullYear();
  // 月份从0开始计数，需+1并补前导0
  const month = String(now.getMonth() + 1).padStart(2, '0');
  const day = String(now.getDate()).padStart(2, '0');
  const hours = String(now.getHours()).padStart(2, '0');
  const minutes = String(now.getMinutes()).padStart(2, '0');
  return `${year}-${month}-${day}T${hours}:${minutes}`;
};

const dateRange = ref({
  from: null,
  to: getLocalDatetimeString()
});

这个方法直接读取本地时间的年月日时分，拼接成datetime-local要求的格式，完全不会出现时区偏移问题。

方法2：利用原生API快速格式化（更简洁）

用浏览器原生的国际化API生成格式匹配的字符串，代码更简洁：

// 简写版本：利用瑞典语本地化格式直接转换
const getLocalDatetimeString = () => {
  return new Date().toLocaleString('sv').replace(' ', 'T').slice(0, 16);
};

// 或者更明确的配置方式（可读性更强）
const getLocalDatetimeString = () => {
  const formatter = new Intl.DateTimeFormat('en-CA', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
    hour12: false
  });
  const parts = formatter.formatToParts(new Date());
  const [year, month, day, hours, minutes] = parts
    .filter(p => ['year','month','day','hour','minute'].includes(p.type))
    .map(p => p.value);
  return `${year}-${month}-${day}T${hours}:${minutes}`;
};

const dateRange = ref({
  from: null,
  to: getLocalDatetimeString()
});

简写版本利用瑞典语本地化输出的YYYY-MM-DD HH:mm格式，替换空格为T后截取前16位即可，非常高效。

验证效果 #

用以上方法生成的字符串绑定到v-model后，输入框会准确显示当前本地时间，完全匹配实际时间，无需额外处理。

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