el-data-picker日期组件，搭配dayjs日期库进行日期选择

在Vue.js中，你可以使用Element UI的el-date-picker组件搭配Day.js日期库来实现日期选择功能。首先，确保你已经安装了Element UI和Day.js。

1. 安装Element UI和Day.js:

npm install element-ui dayjs --save

2. 在你的Vue组件中引入Element UI和Day.js:

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import dayjs from 'dayjs';
 
Vue.use(ElementUI);

3. 使用el-date-picker组件并配置value-format属性以适配Day.js的日期格式:

<template>
  <el-date-picker
    v-model="date"
    type="date"
    placeholder="选择日期"
    value-format="YYYY-MM-DD"
  ></el-date-picker>
</template>
 
<script>
export default {
  data() {
    return {
      date: ''
    };
  },
  watch: {
    date(newDate) {
      // 使用dayjs格式化日期显示
      const formattedDate = dayjs(newDate).format('YYYY年MM月DD日');
      console.log(formattedDate);
    }
  }
};
</script>

在这个例子中，el-date-picker组件用于选择日期，value-format属性确保绑定的日期值是以"YYYY-MM-DD"格式的字符串。watch属性用于监听日期变化，并使用Day.js来格式化显示。当用户选择一个日期，date数据属性会被更新，并且watch方法会被触发，输出格式化后的日期。