在前端开发中，时间选择与日期选择是常见的交互需求。Vue 作为流行的 JavaScript 框架，搭配功能强大的 Element-plus 组件库，能够轻松实现这两个功能。

要使用 Element-plus 的时间选择与日期选择组件，需确保项目中已正确安装并引入 Element-plus。在 Vue 项目的入口文件（通常是 main.js）中进行引入配置。

对于日期选择，Element-plus 提供了 ElDatePicker 组件。在 Vue 组件的模板中，只需简单添加如下代码：

<template>
  <el-date-picker
    v-model="selectedDate"
    type="date"
    placeholder="选择日期">
  </el-date-picker>
</template>

<script setup>
import { ref } from 'vue';

const selectedDate = ref('');
</script>

上述代码中，通过 v-model 绑定一个响应式数据 selectedDate，用于存储用户选择的日期。type="date" 表明这是一个日期选择器，placeholder 则设置了输入框的提示文字。

而时间选择则可以使用 ElTimePicker 组件，示例代码如下：

<template>
  <el-time-picker
    v-model="selectedTime"
    placeholder="选择时间">
  </el-time-picker>
</template>

<script setup>
import { ref } from 'vue';

const selectedTime = ref('');
</script>

这里通过类似的方式，实现了基本的时间选择功能。

若需要同时选择日期和时间，可以使用 ElDateTimePicker 组件：

<template>
  <el-date-time-picker
    v-model="selectedDateTime"
    type="datetime"
    placeholder="选择日期时间">
  </el-date-time-picker>
</template>

<script setup>
import { ref } from 'vue';

const selectedDateTime = ref('');
</script>

Element-plus 的日期与时间选择组件还支持丰富的属性和事件。例如，可以通过设置 format 属性来定义日期和时间的显示格式；通过设置 disabledDate 方法来禁用某些日期等。

在实际项目中，开发者可以根据业务需求，灵活配置这些属性和事件，实现个性化的时间与日期选择功能。Vue 与 Element-plus 的完美结合，为开发者提供了便捷高效的开发方式，能够快速打造出用户体验良好的时间与日期选择交互界面。