用vue的DatePicker 日期选择器 change事件来写

在Vue.js中，使用内置的`v-model`属性结合`<DatePicker>`组件的`change`事件可以轻松实现日期选择。`DatePicker`组件通常来自于一些UI库，如element-ui、iview等，这里我将以element-ui为例。

假设你已经在项目中安装了`element-ui`并引入了`DatePicker`组件，你可以按照以下步骤设置：

<template>
  <el-date-picker
    v-model="selectedDate"
    type="daterange" <!-- 或者单日选择 'date' -->
    range-separator="至"
    start-placeholder="开始日期"
    end-placeholder="结束日期"
    @change="handleDateChange" <!-- 触发change事件 -->
  ></el-date-picker>
</template>

<script>
import { DatePicker } from "element-ui";

export default {
  components: {
    DatePicker,
  },
  data() {
    return {
      selectedDate: "" // 初始化为空字符串或日期对象
    };
  },
  methods: {
    handleDateChange(value) {
      this.selectedDate = value; // 当日期选择改变时更新selectedDate数据绑定值
      console.log("新的日期选择:", value); // 打印新选择的日期
    }
  }
};
</script>

在这个例子中，当用户在日期选择器中选择日期时，`handleDateChange`方法会被触发，`selectedDate`的数据会同步更新，并可以在控制台看到新选择的日期。