<template>
<div>
<el-row type="flex"
justify="end">
<el-select @change="setDate"
v-model="currentYear"
size="small"
style="width: 120px">
<el-option v-for="(item,index) in yearList"
:key="index"
:label="item"
:value="item"></el-option>
</el-select>
<el-select @change="setDate"
v-model="currentMonth"
size="small"
style="width: 120px;margin-left:10px">
<el-option v-for="(item,index) in 12"
:key="index"
:label="item"
:value="item"></el-option>
</el-select>
</el-row>
<el-calendar v-model="currentDate">
<template v-slot:dateCell="{ date, data }"
class="content">
<div class="date-content">
<span class="text"> {{ data.day | getDay }}</span>
<span class="rest"
v-if="isWeek(date)">休</span>
</div>
</template>
</el-calendar>
</div>
</template>
<script>
export default {
filters: {
getDay (value) {
const day = value.split('-')[2]
return day.startsWith('0') ? day.substr(1) : day
}
},
props: {
defaultDate: {
type: Date,
default: () => new Date()
}
},
data () {
return {
currentMonth: this.defaultDate.getMonth() + 1, // 当前月份
currentYear: this.defaultDate.getFullYear(), // 当前年份
currentDate: this.defaultDate,
}
},
computed: {
yearList () {
return Array.from(Array(11), (item, index) => {
return this.currentYear + index - 5
})
}
},
methods: {
// 是否是休息日
isWeek (value) {
return value.getDay() === 6 || value.getDay() === 0
},
setDate () {
let str = this.currentYear + '-' + this.currentMonth + '-1'
this.currentDate = new Date(str)
}
}
}
</script>
<style lang="scss" scoped>
::v-deep .el-calendar-day {
height: auto;
}
::v-deep .el-calendar-table__row td,
::v-deep .el-calendar-table tr td:first-child,
::v-deep .el-calendar-table__row td.prev {
border: none;
}
.date-content {
height: 40px;
text-align: center;
line-height: 40px;
font-size: 14px;
}
.date-content .rest {
color: #fff;
border-radius: 50%;
background: rgb(250, 124, 77);
width: 20px;
height: 20px;
line-height: 20px;
display: inline-block;
font-size: 12px;
margin-left: 10px;
}
.date-content .text {
width: 20px;
height: 20px;
line-height: 20px;
display: inline-block;
}
::v-deep .el-calendar-table td.is-selected .text {
background: #409eff;
color: #fff;
border-radius: 50%;
}
::v-deep .el-calendar__header {
display: none;
}
</style>