vue-date-pick@1.4.1表单提交日期偏移一天：JSON.stringify转UTC时间问题及本地日期设置方法

是的，这确实是UTC转换导致的日期偏差问题 #

你观察到的现象完全符合JSON序列化Date对象的特性：当你用JSON.stringify()处理原生Date对象时，它会自动将日期转换为UTC时区的ISO格式字符串。你的本地时区是GMT+0800（马来西亚时间），所以本地时间Tue Jul 06 2010 00:00:00 GMT+0800对应的UTC时间就是前一天的2010-07-05T16:00:00.000Z，这就导致了提交时的日期偏差。

解决方法：提交前将Date对象转换为本地日期字符串 #

既然问题出在Date对象的序列化上，我们只需要在生成payload时，把BirthDate从Date对象转换成本地时区的日期字符串（比如YYYY-MM-DD格式），再提交给接口即可。以下是针对你现有代码的修改方案：

方案1：修改generatePayload方法处理日期字段

直接在生成payload的过程中，对BirthDate进行转换：

generatePayload() {
  let _obj = { };
  Object.keys(eFormModel).forEach(key => {
    let value = this.$store.state.eform[key];
    // 针对BirthDate字段做本地日期转换
    if (key === 'BirthDate' && value instanceof Date) {
      const year = value.getFullYear();
      // 月份是0开始，所以要+1，并且补前导0
      const month = String(value.getMonth() + 1).padStart(2, '0');
      const day = String(value.getDate()).padStart(2, '0');
      // 转换成YYYY-MM-DD格式的字符串
      _obj[key] = `${year}-${month}-${day}`;
    } else {
      _obj[key] = value;
    }
  });
  // 调试代码保留
  console.log(_obj);
  const jsondata = JSON.stringify(_obj);
  console.log(jsondata);
  return _obj;
},

这样处理后，JSON.stringify()得到的BirthDate就会是"2010-07-06"，和用户选择的日期一致，不会出现时区偏差。

方案2：修改组件绑定，直接获取格式化后的字符串

如果你希望从组件层面直接拿到日期字符串而不是Date对象，可以通过@input事件手动处理：

<DatePick.eform--input_datepicker 
  :value="BirthDate" 
  @input="handleBirthDateChange"
  :format="'DD/MM/YYYY'"
/>

然后在methods中添加处理函数：

handleBirthDateChange(date) {
  if (!(date instanceof Date)) return;
  // 转换为YYYY-MM-DD格式的本地日期字符串
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  const dateStr = `${year}-${month}-${day}`;
  // 更新组件绑定的值和store中的状态
  this.BirthDate = dateStr;
  this.$store.commit('updateEformField', { key: 'BirthDate', value: dateStr });
}

这种方式可以让store中存储的直接是日期字符串，后续生成payload时就不需要额外处理了。

补充说明 #

• 为什么不直接使用date.toISOString()？因为这个方法返回的依然是UTC时区的字符串，解决不了偏差问题。
• 如果后端接口期望的是带时区的ISO格式日期（比如本地时区的），可以考虑使用date.toLocaleString()或者第三方库（如dayjs、moment）来处理，但最稳妥的方式还是直接传递YYYY-MM-DD格式的字符串，避免时区解析的歧义。

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