el-date-picker禁用多个时间段
时间: 2024-09-30 09:08:09 浏览: 43
【JavaScript源代码】vue el-date-picker动态限制时间范围案例详解.docx
`el-date-picker`是Element UI库中的日期选择器组件,在某些场景下,你可能会需要禁用特定的时间段,例如工作日之外、节假日等。要在`el-date-picker`中禁用多个时间段,你可以通过设置其属性`disabled-days`来实现。这个属性应该是一个数组,每个元素是一个JavaScript Date对象,表示你想要禁用的日子。
下面是一个简单的示例:
```javascript
<template>
<el-date-picker
:disabled-days="disabledDates"
placeholder="选择日期"
/>
</template>
<script>
export default {
data() {
return {
disabledDates: [
// 禁用从周日到周六的白天
new Date(), // 当前日期
{ year: 2023, month: 1, day: 1 }, // 新年的第一天
{ year: 2023, month: 1, day: 7 } // 新年的第二天
// ... 添加更多你需要禁用的日期
]
};
}
};
</script>
```
在这个例子中,`new Date()`代表当前日期,你可以根据实际需求替换它。`disabled-days`属性会检查用户选择的日期是否在这个禁用日期列表中,如果是,则该日期不可选。
阅读全文