Vue 2日期格式兼容问题：仅Windows 11报格式不匹配错误

Vue 2组件挂载时初始化from为当月第一天、to为当前日期，一周前运行正常，Linux环境也能正常工作，但在Windows 11客户端上出现错误：

The specified value "2/17/2023" does not conform to the required format, "yyyy-MM-dd"
导致用户必须手动选择日期。已尝试以下方法但未解决：

• 使用toISOString()截取日期部分赋值
• 正则校验并转换日期格式
• 修改客户端系统日期格式为yyyy-MM-dd

解决方案 #

不要依赖系统或内置方法的日期格式化逻辑，手动拼接成yyyy-MM-dd格式是最稳妥的方案，能彻底规避跨系统的格式差异：

方法1：手动拼接日期字符串 #

写一个通用的日期格式化函数，直接生成符合要求的格式：

// 格式化日期为yyyy-MM-dd格式
function formatDate(date) {
  const year = date.getFullYear();
  // 月份和日期不足两位时补0
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  return `${year}-${month}-${day}`;
}

// 组件挂载时执行初始化
mounted() {
  const now = new Date();
  // 构造当月第一天的日期对象
  const firstDay = new Date(now.getFullYear(), now.getMonth(), 1);
  this.from = formatDate(firstDay);
  this.to = formatDate(now);
}

方法2：修复toISOString的时区偏移问题 #

toISOString()返回的是UTC时间，可能会因为时区差异导致日期偏移（比如北京时间凌晨的日期会变成前一天的UTC日期），如果要继续使用该方法，需先调整为本地时区的0点再处理：

function getLocalISOString(date) {
  // 消除时区偏移对日期的影响
  const localDate = new Date(date.getTime() - date.getTimezoneOffset() * 60000);
  return localDate.toISOString().substring(0, 10);
}

mounted() {
  const now = new Date();
  const firstDay = new Date(now.getFullYear(), now.getMonth(), 1);
  this.from = getLocalISOString(firstDay);
  this.to = getLocalISOString(now);
}

额外排查点 #

• 检查组件内是否有其他代码在初始化后修改了from/to的值，导致格式被改为系统本地化格式
• 确认日期输入框的type="date"属性是否正确，该类型仅接受yyyy-MM-dd格式的字符串

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