vue3加element plus中的el-date-picker格式转换

在Vue 3中使用Element Plus的`el-date-picker`组件时，日期格式的转换通常发生在数据绑定或事件处理程序中，比如从组件获取用户选择的日期并将其格式化为特定的字符串格式，或者将外部传递的字符串转换为日期对象以便于处理。

`el-date-picker`默认的日期格式是ISO 8601标准（YYYY-MM-DD），但你可能需要根据需求转换为其他格式，如"yyyy年MM月dd日"、"MM/dd/yyyy"等。这可以通过JavaScript的内置方法`Date`对象的方法来实现。

例如，假设你想要将用户选择的日期格式化为"yyyy年MM月dd日"：

<template>
  <el-date-picker v-model="selectedDate" :format="dateFormat"></el-date-picker>
</template>

<script>
export default {
  data() {
    return {
      selectedDate: '',
      dateFormat: 'yyyy年MM月dd日',
    };
  },
  created() {
    // 如果需要，可以在这个生命周期钩子里处理初始值或转换格式
    this.selectedDate = this.convertToFormat(new Date()); // 假设convertToFormat是一个自定义方法
  },
  methods: {
    convertToFormat(date) {
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      return `${year}年${month}月${day}日`;
    },
  },
};
</script>

如果你想在用户输入后立即转换格式，可以在`v-model`的更新事件中调用转换方法：

<template>
  <el-date-picker v-model="inputDate" @input="formatInputDate"></el-date-picker>
</template>

<script>
export default {
  data() {
    return {
      inputDate: '',
    };
  },
  methods: {
    formatInputDate(value) {
      this.inputDate = this.convertToFormat(value);
    },
    convertToFormat(date) {
      ... // 与上面的convertToFormat相同
    },
  },
};
</script>