如何在ElementPlus中正确地使用el-date-picker组件来获取日期？

在Element Plus中，`el-date-picker`是一个用于选择日期的组件。如果你想正确地使用它并获取用户选择的日期，可以按照以下步骤操作：

1. 引入组件：首先，在你的Vue文件中引入`ElDatePicker`组件：

   <script setup>
       import { ElDatePicker } from 'element-plus';
   </script>

2. 定义插槽（slot）：你可以将`<el-date-picker>`包裹在一个`<template>`标签中，并设置需要的属性和事件监听器。例如，为了获取日期，你会用到`v-model`绑定值：

   <template>
     <el-date-picker
       v-model="selectedDate"
       type="date"  <!-- 或者根据需求选择其他类型如daterange, week等 -->
       placeholder="请选择日期"
       @change="handleDateChange"  <!-- 触发日期改变的回调函数 -->
     ></el-date-picker>
   </template>

3. 配置数据和处理函数：在`setup()`钩子中，定义`selectedDate`作为日期选择框的数据模型，并编写`handleDateChange`函数来处理日期变化：

   const selectedDate = ref(null);  // 使用ref管理日期值

   function handleDateChange(date) {
       console.log('用户选择了日期:', date);
       // 可在此处更新其他状态或做进一步处理
       selectedDate.value = date;  // 设置selectedDate的值
   }

4. 实际使用：现在，当用户在日期选择器上选择日期后，`handleDateChange`会被触发，`selectedDate`变量就会包含所选日期。