el-date-picker组件通过Picker Options属性中的disabledDate,禁用某个日期时间区间以外的所有日期时间
时间: 2024-02-28 22:54:40 浏览: 117
element-ui 限制日期选择的方法(datepicker)
是的,`el-date-picker` 组件的 Picker Options 属性中的 `disabledDate` 可以用于禁用某个日期时间区间以外的所有日期时间。
使用 `disabledDate` 函数时,需要传入一个参数 `time`,该参数表示一个 `Date` 类型的时间对象。函数需要返回一个布尔值,用于判断该时间对象是否应该被禁用。
下面是一个示例代码,用于禁用 2021 年 10 月 1 日之前和 2021 年 10 月 10 日之后的所有日期时间:
```html
<template>
<el-date-picker
v-model="date"
:picker-options="pickerOptions"
></el-date-picker>
</template>
<script>
export default {
data() {
return {
date: '',
pickerOptions: {
disabledDate: time => {
const start = new Date('2021-10-01')
const end = new Date('2021-10-10')
return time.getTime() < start.getTime() || time.getTime() > end.getTime()
}
}
}
}
}
</script>
```
在上面的代码中,`disabledDate` 函数中首先定义了一个开始时间 `start` 和一个结束时间 `end`,然后判断传入的时间对象 `time` 是否在这两个时间之间,如果不在,则返回 `true`,表示该时间对象应该被禁用。
这样,就可以通过 `disabledDate` 属性来禁用某个日期时间区间以外的所有日期时间了。
阅读全文