// An highlighted block
// 封装日历组件
<el-date-picker
clearable
:picker-options="pickerOptions" // pickerOptions 改变日期
format="yyyy 第 WW 周"
style="width: 100%;"
:placeholder="`请选择${item.placeholder || item.label}`"
v-bind="item.props"
:type="item.typeDate" // 显示日周月
v-if="item.type === 'weekpicker'" // 显示周
v-model="formAdd[item.value]"
/>
// 方法
computed: {
pickerOptions() {
return {
// 法定节假日日期不可选
disabledDate: time => {
for (var i = 0; i < HOLIDAY.length; i++) {
if (time.getTime() === new Date(HOLIDAY[i]).getTime()) {
return true
}
}
if (time.getDay() === 0 || time.getDay() === 6) {
// 返回日期中表示周几的数值(0 表示周日,6 表示周六)
return '#'
} else {
// 今日之前的日期不可选
let tempTime = 3600 * 1000 * 24
return time.getTime() < new Date() - tempTime
}
},
//修改法定节假日期的样式
cellClassName: time => {
for (var i = 0; i < HOLIDAY.length; i++) {
if (time.getTime() === new Date(HOLIDAY[i]).getTime()) {
return 'x-hd'
}
}
}
}
},
openDialogVisible: {
get() {
return this.DialogVisible
},
set(val) {
console.log(this.formAdd, 'set')
this.$emit('update:DialogVisible', val) // openDialogVisible改变的时候通知父组件
}
}
}
// 引入节假日日期
import { HOLIDAY } from '@/plugins/holiday.js'
// 2022 年节假日
export const HOLIDAY = [
'2022/04/03',
'2022/04/04',
'2022/04/05',
'2022/04/30',
'2022/05/01',
'2022/05/02',
'2022/05/03',
'2022/05/04',
'2022/06/03',
'2022/06/04',
'2022/06/05',
'2022/09/10',
'2022/09/11',
'2022/09/12',
'2022/10/01',
'2022/10/02',
'2022/10/03',
'2022/10/04',
'2022/10/05',
'2022/10/06',
'2022/10/07'
]
/* 日历修改样式 要放在全局调用 不然不生效*/
.x-hd div span {
color: #f56c6c !important;
border: 1px solid #f56c6c;
border-radius: 50%;
}
最终效果: