vue-日历表组件
<template>
<div class="canlendarPanel">
<div class="canlendar-header">
<el-row :gutter="20" type="flex" class="row-bg" justify="center">
<el-col :span="6">
<span @click="changeDate('preYear')"><i class="el-icon-d-arrow-left" name="preYear"></i></span>
<span @click="changeDate('preMonth')"><i class="el-icon-arrow-left" name="preMonth"></i></span>
</el-col>
<el-col :span="10"><p class="currenDate">{{ `${year}年${month}月${day}日` }}</p></el-col>
<el-col :span="6">
<span @click="changeDate('nextMonth')"><i class="el-icon-arrow-right" name="nextMonth"></i></span>
<span @click="changeDate('nextYear')"><i class="el-icon-d-arrow-right" name="nextYear"></i></span>
</el-col>
</el-row>
</div>
<div class="canlendar-main">
<div class="main-header">
<span v-for="(item, index) in week">{{ item }}</span>
</div>
<div class="main-list">
<span v-for="index in weekDay" class="disabled">{{ preMonthSize - weekDay + index }}</span>
<span v-for="index in monthList[month - 1]" :class="{ currentDay: index === day }">{{ index }}</span>
<span v-for="index in lastWeekDay" class="disabled">{{ index }}</span>
</div>
</div>
</div>
</template>
<script>
export default {
name: '',
components: {}, //局部注册
data() {
return {
year: 0,
month: 0,
day: 0,
week: ['日', '一', '二', '三', '四', '五', '六'],
monthList: [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31],
weekDay: 1,
lastWeekDay: 1,
// 上一个月有多少天
get preMonthSize() {return this.month - 1 === 0 ? 31 : this.monthList[this.month - 2]}
}
},
created() {
// 获取当前日期
const date = new Date()
this.year = date.getFullYear()
this.month = date.getMonth() + 1
this.day = date.getDate()
this.initDate()
},
methods: {
// 根据年月日获得为星期几
getWeekDay(year, month, day) {
return new Date(`${year}/${month}/${day}`).getDay()
},
initDate() {
(this.year % 4 === 0 && this.year % 100 !== 0) || this.year % 400 === 0 ? this.monthList[1] = 29 : this.monthList[1] = 28
// 获得指定年月的1号是星期几
const firstDay = this.getWeekDay(this.year, this.month, 1)
// 在1号前面填充多少个上个月的日期
this.weekDay = firstDay === 7 ? 0 : firstDay
// 获得最后一天是星期几，往后填充多少个
const remineDay = this.getWeekDay(
this.year,
this.month,
this.monthList[this.month - 1]
)
this.lastWeekDay = remineDay === 7 ? 6 : 6 - remineDay
},
changeDate(type) {
switch (type) {
case 'preYear':
this.year -= 1
break
case 'preMonth':
// 当前月份为1月， 上一个月分为12月，年份减1
if (this.month === 1) {
this.month = 12
this.year -= 1
} else {
this.month -= 1
}
break
case 'nextYear':
this.year += 1
break
case 'nextMonth':
// 当前月份为12月， 下个月分为1月，年份加1
if (this.month === 12) {
this.month = 1
this.year += 1
} else {
this.month += 1
}
break
default:
break
}
this.initDate()
}
},
}
</script>
<style lang="scss" scoped>
.canlendarPanel {
width: 420px;
height: 440px;
background-color: rgb(234, 238, 255);
.canlendar-header {
line-height: 40px;
background: rgb(86, 146, 240);
text-align: center;
color:#fff;
font-size: 16px;
.currenDate {margin: 0 20px;}
span {cursor: pointer;margin: 10px;}
}
.canlendar-main {
line-height: 40px;
font-size: 14px;
.main-header {
span {display: inline-block;width: 58px;text-align: center; }
}
.main-list {
span {
text-align: center;
display: inline-block;
width: 40px;
height: 40px;
margin: 8px;
cursor: pointer;
border: 1px solid rgb(234, 238, 255);
}
.disabled {color: #cccccc;}
.currentDay {
border-radius: 50%;
border-color: rgb(3, 92, 236);
}
}
}
}
</style>
