vue + element实现el-date-picker的时间格式转换，以及自定义时间格式，修改输入的时间格式

在Vue.js中结合Element UI (Eleme) 使用`el-date-picker`组件时，有时需要处理日期时间格式的转换。Element UI 的日期选择器默认使用的是 `yyyy-MM-dd HH:mm:ss` 格式，如果你想要定制输入或显示的时间格式，可以借助Vue的特性和Moment.js库来实现。

首先，你需要安装Moment.js库，因为它提供了一套强大的日期解析和格式化工具：

npm install moment

然后，在Vue组件中引入并实例化：

import Vue from 'vue';
import Moment from 'moment';

Vue.use(Moment);

接下来，你可以创建一个计算属性（computed property）来格式化和反格式化日期：

export default {
  data() {
    return {
      customFormat: 'YYYY-MM-DD HH:mm', // 自定义的时间格式
    };
  },
  computed: {
    formattedDate: {
      get() {
        let date = this.myDatePickerValue; // 假设myDatePickerValue是从el-date-picker获取到的值
        if (date) {
          return Moment(date).format(this.customFormat); // 格式化日期
        }
        return '';
      },
      set(value) {
        this.myDatePickerValue = Moment(value, this.customFormat).toDate(); // 反格式化输入的值
      },
    },
  },
};

在模板上，你可以这样展示和接收用户输入：

<template>
  <el-date-picker
    v-model="formattedDate"
    type="datetime"
    placeholder="选择日期时间"
    :picker-options="{ format: customFormat }" // 将自定义格式传给日期选择器
  ></el-date-picker>
</template>

当用户输入时间时，`set`方法会把格式化的字符串转换回原始日期对象，反之亦然。