vue3+element Plus中使用日期格式化库day.js

<template>
  <el-date-picker
    v-model="date"
    type="date"
    placeholder="选择日期"
    :default-value="defaultDate"
    format="YYYY-MM-DD"
    value-format="YYYY-MM-DD"
  >
  </el-date-picker>
</template>
 
<script>
import { ref } from 'vue';
import dayjs from 'dayjs';
 
export default {
  setup() {
    const date = ref(dayjs().format('YYYY-MM-DD'));
    const defaultDate = ref(dayjs().subtract(1, 'day').format('YYYY-MM-DD'));
 
    return {
      date,
      defaultDate
    };
  }
};
</script>

这段代码展示了如何在Vue 3和Element Plus中结合Day.js库来设置默认日期和日期格式。el-date-picker组件的v-model绑定了一个响应式数据date，default-value属性使用了计算属性defaultDate，它被设置为昨天的日期。日期格式通过format和value-format属性定义为"YYYY-MM-DD"。这样，无论是选择器的默认显示，还是用户选择后的值，都将遵循统一的日期格式。