Element-ui Date-Picker 返回数据 格式化

最近在表单填写日期的时候使用element-ui 的时间选择器，很方便但是数据的格式和后端插入数据有些不同，就需要中间处理。这里就简单记录一下其自带的属性如何来控制日期的格式。

很简单，一个属性value-format

日期格式

value-format=“yyyy-MM-dd”

‘2021-02-01’

标准时间格式

value-format=“yyyy-MM-dd HH:mm:ss”

‘2021-02-01 00:00:00’

时间戳

value-format=“timestamp”

‘1612108800000’

默认格式

返回的是一个Date对象

‘Mon Feb 01 2021 00:00:00 GMT+0800 (中国标准时间)’

测试结果

下面对四种不同的格式进行打印输出

<template>
  <div class="test">
    <el-date-picker
        v-model="value1"
        type="datetime"
        value-format="yyyy-MM-dd"
        placeholder="请选择value1">
    </el-date-picker>

    <el-date-picker
        v-model="value2"
        type="datetime"
        value-format="yyyy-MM-dd HH:mm:ss"
        placeholder="请选择value2">
    </el-date-picker>
    <el-date-picker
        v-model="value3"
        type="datetime"
        value-format="timestamp"
        placeholder="请选择value3">
    </el-date-picker>

    <el-date-picker
        v-model="value4"
        type="datetime"
        placeholder="请选择value4">
    </el-date-picker>
    <el-button @click="showValue">打印日期</el-button>
  </div>
</template>

<script>
export default {
  name: "test",
  methods: {
    showValue() {
      console.log(this.value1);
      console.log(this.value2);
      console.log(this.value3);
      console.log(this.value4);
    }
  },
  data() {
    return {
      value1: '',
      value2: '',
      value3: '',
      value4: ''
    }
  }
}
</script>

<style scoped>
.test {
  min-height: 600px;
}
</style>