el-date-picker 置灰一些时间picker-options
时间: 2023-08-17 22:06:53 浏览: 116
ngx-input-date-range-picker:角度输入日期范围选择器库
对于 Element UI 的 el-date-picker 组件,你可以使用 picker-options 属性来配置一些选项,包括禁用特定时间段。
下面是一个示例代码,展示如何禁用每周的周末和特定时间段:
```html<template>
<el-date-picker v-model="pickedDate"
:picker-options="pickerOptions"
type="date"
placeholder="选择日期"
></el-date-picker>
</template>
<script>
export default {
data() {
return {
pickedDate: null,
pickerOptions: {
disabledDate(time) {
// 禁用周末 const day = time.getDay();
if (day ===0 || day ===6) {
return true;
}
// 禁用特定时间段 const startTime = new Date('2022-01-0109:00:00').getTime();
const endTime = new Date('2022-01-0118:00:00').getTime();
const currentTime = time.getTime();
if (currentTime >= startTime && currentTime <= endTime) {
return true;
}
return false;
},
},
};
},
};
</script>
```
在 pickerOptions 中的 disabledDate 方法中,我们首先判断时间是否为周末,如果是周末则禁用。然后,我们定义了一个特定的时间段,如果当前时间在该时间段内,则也禁用。
你可以根据自己的需求修改 disabledDate 方法中的逻辑,来实现你想要禁用的时间段。
阅读全文