vue3中el-date-picker可选范围
时间: 2025-02-06 21:38:18 浏览: 64
### Vue3 中设置 Element Plus `el-date-picker` 可选日期范围
在 Vue3 和 Element Plus 组合使用的场景下,通过配置 `el-date-picker` 的属性可以实现对可选日期范围的有效控制。具体来说,利用 `disabledDate` 属性来定义哪些日期不可被选择。
对于单个日期的选择器而言,可以通过传递给 `disabledDate` 一个函数来自定义禁用逻辑:
```javascript
// JavaScript (setup script)
import { ref } from 'vue';
export default {
setup() {
const timeValue = ref('');
// 定义 disabledDate 函数用于限制可选日期
const disabledDateFun = (time) => {
let currentDate = new Date();
// 假设不允许选择今天之前的日期
return time.getTime() < currentDate.setDate(currentDate.getDate() - 1);
};
return {
timeValue,
disabledDateFun
};
}
};
```
当涉及到区间选择时(即 `type="daterange"`),同样适用上述方式调整起始日和结束日之间的关系以及各自能选取的时间边界[^1]。
为了更好地理解这一过程,在 HTML 模板部分应如下编写组件标签:
```html
<template>
<!-- 使用 el-date-picker 进行日期区间的挑选 -->
<el-date-picker
v-model="timeValue"
type="daterange"
start-placeholder="开始时间"
end-placeholder="结束时间"
format="YYYY.MM.DD"
value-format="YYYYMMDD"
:disabled-date="disabledDateFun">
</el-date-picker>
</template>
```
此代码片段展示了如何结合模板中的 `<el-date-picker>` 标签与脚本内的逻辑处理共同作用于设定有效的日期选择范围。
阅读全文
相关推荐


















