vue写自定义日期选择的公共组件

在Vue.js中创建一个自定义日期选择的公共组件，可以使用`element-ui`库中的`el-date-picker`组件作为基础，并结合Vue的灵活性来定制。下面是一个简单的步骤和代码示例：

1. 首先，在项目中安装`element-ui`，如果尚未安装，可以运行`npm install element-ui`。

2. 定义一个名为`CustomDatePicker.vue`的文件，编写组件模板：

<template>
  <div class="custom-datepicker">
    <el-date-picker
      v-model="value"
      type="date" <!-- 或者其他类型，如daterange等 -->
      :picker-options="options" <!-- 这里设置日期选择器的配置 -->
      @change="handleChange" <!-- 触发事件处理改变值 -->
    ></el-date-picker>
  </div>
</template>

<script>
export default {
  name: 'CustomDatePicker',
  props: {
    value: {
      type: Date,
      required: true,
      default: () => new Date()
    },
    options: {
      // 配置选项，例如：默认显示当前日期、允许修改日期范围等
      default: {
        shortcuts: [
          { text: '今天', value: () => new Date() }
        ],
        startOfWeek: 0, // 星期一为一周开始
      }
    },
    onChange: {
      // 出于组件外部触发日期改变的回调
      type: Function,
      default: () => {}
    }
  },
  methods: {
    handleChange(date) {
      this.$emit('input', date); // 当用户选择日期时，触发'input'事件
      this.onChange(date); // 如果有外部回调函数，也调用它
    }
  }
}
</script>

<style scoped>
.custom-datepicker {
  /* 根据需要添加样式 */
}
</style>

3. 在其他组件中使用这个自定义组件，并传递必要的属性，如初始日期和事件处理函数：

<template>
  <CustomDatePicker
    v-model="selectedDate"
    @change="handleDateChange"
  />
</template>

<script>
import CustomDatePicker from '@/components/Common/CustomDatePicker.vue';

export default {
  components: {
    CustomDatePicker
  },
  data() {
    return {
      selectedDate: new Date(),
    };
  },
  methods: {
    handleDateChange(date) {
      console.log('日期已更改:', date);
      // 在这里处理选择的日期
    }
  }
};
</script>