前端选择日期后，但是传给后端的日期是前一天的

大年初九，开工啦！祝大家：新的一年能学到更多有用的知识，薪资也能蹭蹭蹭的往上涨！

话说回来，开年上班第一天遇到一个bug，使用饿了么的时间选择组件时，选中的时间与传给后端的时间相差了整整一天，上网查找资料发现原来是时区的问题，element-ui中时间控件的默认时间为国际标准时间，所以与北京时间差8个小时，只需要把时区改为东八就行，但这并不能解决我目前的需求，所以使用另一种方法

加入

format="YYYY-MM-DD"   //选中之后在页面上展示的格式
value-format="YYYY-MM-DD"    //导致缺少一天的罪魁祸首,需要添加格式化模板,就不会少了

必须得大写，不然不生效（有的分享者没写规范，导致我多走了好几次弯路）

 <el-date-picker
            type="date"
            placeholder="选择日期"
            v-model="ruleForm.invalidDate"
            @change="publishDateChange"
            style="width:460px"
            format="YYYY-MM-DD"//选中之后在页面上展示的格式
            value-format="YYYY-MM-DD"//导致缺少一天的罪魁祸首,需要添加格式化模板,就不会少了
          ></el-date-picker>

到这如果后端要的是yyyy-mm-dd格式的，那么就结束了后面的不需要看了。

但是我这个后端要求的是UTC格式的，那么继续处理

写一个yyyy-mm-dd转UTC格式的方法

const dataChange = (item: any) => {
  // 将日期字符串转换为Date对象
  const dateObj = new Date(item);
  console.log(dateObj, 'dateObj');
  // 获取时间戳（毫秒）
  const timestamp = dateObj.getTime();
  console.log(timestamp, 'timestamp');
  
  // 转换格式
  const outputDate = new Date(timestamp + 8* 60 * 60 * 1000).toISOString().replace('.000Z', '.000Z');
  console.log(outputDate, 'outputDate');

  return outputDate;
};

正常这样转换的话得到的时分秒是固定的，是早上08:00:00

我的需求是需要当前的操作时间，故继续处理

        

const dataChange = (item: any) => {
  // 将日期字符串转换为Date对象
  const dateObj = new Date(item);
  console.log(dateObj, 'dateObj');
  // 获取时间戳（毫秒）
  const timestamp = dateObj.getTime();
  console.log(timestamp, 'timestamp');


  // 获取当前的时分秒
  const myDate = new Date();
  let h = myDate.getHours(); // 获取当前小时数(0-23)
  let m = myDate.getMinutes(); // 获取当前分钟数(0-59)
  let s = myDate.getSeconds(); // 获取当前秒数(0-59)


  // 转换格式
  const outputDate = new Date(timestamp + h * 60 * 60 * 1000 + m * 60 * 1000 + s * 1000).toISOString().replace('.000Z', '.000Z');
  console.log(outputDate, 'outputDate');

  return outputDate;
};

获取当前的时分秒，再转成毫秒，再进行格式转换就能满足我的需求了

最后希望大家在以后的工作上不要遇到奇奇怪怪的需求，再见！