vue3日期时间选择组件
时间: 2025-01-13 19:48:54 浏览: 61
### Vue 3 日期时间选择器组件示例
对于 Vue 3 用户来说,Element Plus 是一个非常受欢迎的选择。此库继承了 Element UI 的设计风格并进行了改进以适应 Vue 3。
#### 使用 Element Plus DateTimePicker 组件
安装 Element Plus:
```bash
npm install element-plus --save
```
引入并注册全局组件或按需加载所需模块后,在模板中可以这样使用 `el-date-picker` 来创建一个带有时间和日期选项的时间选择器[^1]。
```html
<template>
<div class="block">
<!-- datetime picker -->
<span class="demonstration">默认</span>
<el-date-picker v-model="value1" type="datetime" placeholder="选择日期时间"></el-date-picker>
<!-- range datetime picker -->
<br /><br />
<span class="demonstration">范围选择</span>
<el-date-picker
v-model="value2"
type="datetimerange"
:default-time="['09:00:00', '21:00:00']"
start-placeholder="开始日期"
end-placeholder="结束日期"
:picker-options="pickerOptions"
></el-date-picker>
</div>
</template>
<script setup lang="ts">
import { ref } from "vue";
const value1 = ref("");
const value2 = ref("");
// 可选配置项
const pickerOptions = {
shortcuts: [
{
text: "最近一周",
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
picker.$emit("pick", [start, end]);
},
},
// 更多快捷方式...
],
};
</script>
```
上述代码展示了两种类型的日期时间选择器:单个时刻选取以及时间段选取,并设置了部分自定义参数来增强用户体验。
另一个轻量级替代方案是 **Vue Tailwind Datepicker**,它基于流行的样式框架 Tailwind CSS 构建而成,适合追求简约美观界面的应用程序开发人员[^4]。
阅读全文
相关推荐


















