要实现的效果如下：
具体的需求是实际上班日期才可以进行选择，
html：
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<template> <div class="block"> <span class="demonstration">日期禁用</span> <el-date-picker v-model="value2" align="right" type="date" placeholder="选择日期" :picker-options="pickerOptions"> </el-date-picker> </div> </template> |
js:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
const noFilters = ['10/15', '10/16'] const filters = ['10/26', '10/27'] export default { data() { return { pickerOptions: { disabledDate(time) { // 今天以前不可选 let isBeforeToday = time.getTime() < Date.now() - 172800000; if(isBeforeToday) return true // 周六、周日也要上班的日子要可以选择（法定节假日调休） let isForceEnableDay = noFilters.some(i => { return time.getTime() == new Date('2022/'+ i).getTime() }) if(isForceEnableDay) return false // 周六、周日要禁用 if(time.getDay() == 0 || time.getDay() == 6) { return true } // 工作日放假的日子要禁用（法定节假日） let isForceDisableDay = filters.some(i => { return time.getTime() == new Date('2022/'+ i).getTime() }) if(isForceDisableDay) return true } } }; } }; |
