封装el-date-picker

el-date-picker是Element UI库中的一个日期选择器组件，用于在网页中选择日期。它提供了丰富的配置选项和交互功能，可以满足不同场景下的日期选择需求。

封装el-date-picker的步骤如下：
1. 引入Element UI库：在项目中引入Element UI库，可以通过CDN引入或者使用npm安装。
2. 创建封装组件：在Vue组件中创建一个新的组件，可以命名为DatePicker或其他合适的名称。
3. 在组件中使用el-date-picker：在新创建的组件中使用el-date-picker组件，并根据需要配置相关属性和事件。
4. 封装组件的props：根据需要，可以在封装组件中定义props来接收父组件传递的属性值，例如设置默认日期、禁用日期等。
5. 封装组件的事件：根据需要，可以在封装组件中定义事件来向父组件传递选择的日期值或其他相关信息。
6. 样式和布局：根据项目需求，可以对封装组件进行样式和布局的调整。

以下是一个简单的封装el-date-picker的示例代码：

<template>
  <div>
    <el-date-picker
      v-model="selectedDate"
      :default-value="defaultDate"
      :disabled-date="disabledDate"
      @change="handleChange"
    ></el-date-picker>
  </div>
</template>

<script>
export default {
  name: 'DatePicker',
  props: {
    defaultDate: {
      type: Date,
      default: null
    }
  },
  data() {
    return {
      selectedDate: null
    }
  },
  methods: {
    handleChange(date) {
      this.$emit('select', date);
    },
    disabledDate(time) {
      // 自定义禁用日期的逻辑
      // 返回true表示禁用该日期，返回false表示可选
      return time.getTime() < Date.now();
    }
  }
}
</script>

<style scoped>
/* 样式调整 */
</style>