2020-06-30 关于element-ui中el-date-picker组件时间落后8个小时的问题

使用elementUI的时间选择控件el-date-picker后，作为参数上传到后台接收，发现后台时间比前台时间少一天。

场景：

<el-form-item label="开始使用时间" prop="usedTime">
     <el-date-picker v-model="formAdd.usedTime" type="date" placeholder="选择日期"></el-date-picker>
</el-form-item>

例如我们选择的时间是2020-06-03：

但提交到后端我们发现时间变了：

需要科普一个知识：

el-date-picker默认返回的是国际标准时间（GMT）
中国国家标准时间（UTC）是东经120°（东八区）的地方时间
同格林威治时间（即国际标准时间GMT）相差8小时
因此，若后端没有帮忙转换，入库时肯定是少一天的，需要自己手动+8小时转换，再提交到后端，这个需要与后端协调好，看是他转换还是你转换。

解决办法

1.若后端接收的类型是字符串类型：

在时间控件上添加指定日期格式的属性value-format=“yyyy-MM-dd” 即可。这个 yyyy-MM-dd 格式可自定义参照element手册

2.若后端接收的类型是date类型：

//this.formAdd.usedTime是时间控件绑定的时间
const data = this.formAdd.usedTime
//中国标准时间转化为时间戳
const  timestamp = data.getTime();
console.log('timestamp', timestamp ); // > timestamp 1592928000000

附录：

时间戳格式化及异常处理过滤函数

/**
 * 时间戳格式化
 * @param {*} time 时间戳
 * @param {*} cFormat 自定义时间格式 参数: y年 m月 d日 h时 i分 s秒 a星期 格式如：'{y}-{m}-{d} {h}:{i}:{s}'
 */
parseTime(time, cFormat) {
  if (time) {
    if (arguments.length === 0) {
      return null
    }
    const format = cFormat || '{y}-{m}-{d} {h}:{i}:{s}'
    let date
    if (typeof time === 'object') {
      date = time
    } else {
      if ((typeof time === 'string') && (/^[0-9]+$/.test(time))) {
        time = parseInt(time)
      }
      if ((typeof time === 'number') && (time.toString().length === 10)) {
        time = time * 1000
      }
      date = new Date(time)
    }
    const formatObj = {
      y: date.getFullYear(),
      m: date.getMonth() + 1,
      d: date.getDate(),
      h: date.getHours(),
      i: date.getMinutes(),
      s: date.getSeconds(),
      a: date.getDay()
    }
    const time_str = format.replace(/{([ymdhisa])+}/g, (result, key) => {
      const value = formatObj[key]
      // Note: getDay() returns 0 on Sunday
      if (key === 'a') {
        return ['日', '一', '二', '三', '四', '五', '六'][value]
      }
      return value.toString().padStart(2, '0')
    })
    return time_str
  } else {
    return ""
  }
}

/**
 * 时间戳日期过滤
 * @param {*} time 时间戳
 * @param {*} cFormat 自定义时间格式 参数: y年 m月 d日 h时 i分 s秒 a星期 格式如：'{y}-{m}-{d} {h}:{i}:{s}'
 */
let dataFormat = (time, cFormat) => {
  //判断后端是否传空
  if (typeof time === 'object') {
    return '暂无'
  }
  //判断后端是否帮我们转换过了
  if (typeof time === 'string' && time.length > 0) {
    return time
  }
  //没有再去转换
  let res = parseTime(time, cFormat)
  let data = res.indexOf('NaN') > -1 ? '暂无' : res
  return data
}

最后编辑于：2021.05.18 18:57:05