el-date-picker 限定选择区间
时间: 2023-10-16 21:10:24 浏览: 78
您可以使用`el-date-picker`组件的`picker-options`属性来限定选择区间。首先,您可以定义一个包含`disabledDate`方法的对象,该方法接收一个日期参数,并返回一个布尔值来表示该日期是否可选择。
以下是一个示例:
```html
<template>
<div>
<el-date-picker
v-model="date"
:picker-options="pickerOptions"
type="date"
placeholder="选择日期">
</el-date-picker>
</div>
</template>
<script>
export default {
data() {
return {
date: null,
pickerOptions: {
disabledDate(time) {
// 这里可以设置您的自定义逻辑来限定选择区间
// 返回 true 表示禁止选择该日期
// 返回 false 表示允许选择该日期
return time.getTime() < Date.now() - 8.64e7 || time.getTime() > Date.now() + 8.64e7;
}
}
};
}
};
</script>
```
在上面的示例中,`pickerOptions`对象包含一个`disabledDate`方法,该方法实现了对选择区间的限制。当前示例中,我们禁止选择昨天之前的日期和明天之后的日期。
您可以根据您的需求自定义`disabledDate`方法内的逻辑来限定选择区间。请注意,`disabledDate`方法中的时间参数是一个 JavaScript Date 对象,您可以使用 Date 对象的方法和属性进行比较和计算。
希望这个示例能帮到您!
阅读全文