当前位置：首页 > news >正文

VUE篇之日历组件

news 2025/7/1 20:35:11

1.简单日历组件展示

思路：根据当前月的第一天是星期几，来显示日期

<template><div class="wrap"><el-button @click="preMonth">上个月</el-button><el-tag>当前年份{{ curYear }}</el-tag><el-tag>当前月份{{ curMonth }}</el-tag><el-button @click="nextMonth">下个月</el-button><div class="weeks"><div v-for="item in week" :key="item" class="week">{{ item }}</div></div><div class="days"><!-- 当月 --><div v-for="item in curDays" :key="item + 'cur'" class="curday">{{ item }}</div></div></div>
</template>
<script>
import moment from 'moment';
moment.suppressDeprecationWarnings = true;
export default {data() {return {curYear: moment().year(), //当前年curMonth: moment().month() + 1, //当前月week: ['一', '二', '三', '四', '五', '六', '七'],firstDay: moment(`${moment().year()}-${moment().month() + 1}`).startOf('month').day(), //获取当月第一天是星期几;星期日为 0，星期六为 6curDays: moment().daysInMonth() //获取当月一共有多少天};},methods: {preMonth() {this.curMonth--;// 如果小于1表示上一年;重置日期if (this.curMonth < 1) {this.curYear--;this.curMonth = 12;}this.curDays = moment(`${this.curYear}-${this.curMonth}`).daysInMonth();this.firstDay = moment(`${this.curYear}-${this.curMonth}`).startOf('month').day();if (this.firstDay == 0) {this.firstDay = 7;}},nextMonth() {this.curMonth++;// 如果超过12表示下一年;重置日期if (this.curMonth > 12) {this.curYear++;this.curMonth = 1;}this.curDays = moment(`${this.curYear}-${this.curMonth}`).daysInMonth();this.firstDay = moment(`${this.curYear}-${this.curMonth}`).startOf('month').day();if (this.firstDay == 0) {this.firstDay = 7;}}}
};
</script><style lang="scss">
.wrap {width: 700px;height: 100%;.weeks {width: 100%;height: 50px;display: flex;.week {width: 100px;line-height: 50px;text-align: center;background: gainsboro;}}.days {display: flex;flex-wrap: wrap;.lastday,.curday {width: 100px;line-height: 50px;text-align: center;}.lastday {color: gold;}}
}
</style>

2.日历组件增强版------带有上个月或者下个月日期

较比上一版本，这个版本多了2个方法，主要用于更新上个月剩余日期，以及下个月最新日期

上个月日期：

// 获取上个月剩余天数getPreMonthDays() {if (this.firstDay == 1) return; //表示上个月无剩余天数let month = this.curMonth;let year = this.curYear;month--;if (month == 0) {year--;month = 12;}// 获取上个月的天数const days = moment(`${year}-${month}`).daysInMonth();this.preDays = days;},

下个月日期：

// 获取下个月要显示的天数getNextMonthDays() {let month = this.curMonth;let year = this.curYear;// 获取当月最后一天是星期几const lastDay = moment(`${year}-${month}`).endOf('month').day();this.nextDays = lastDay == 0 ? 7 : lastDay;}

整体代码：

<template><div class="wrap"><el-button @click="preMonth">上个月</el-button><el-tag>当前年份{{ curYear }}</el-tag><el-tag>当前月份{{ curMonth }}</el-tag><el-button @click="nextMonth">下个月</el-button><div class="weeks"><div v-for="item in week" :key="item" class="week">{{ item }}</div></div><div class="days"><!-- 上个月 --><div v-for="item in firstDay - 1" :key="item + 'pre'" class="lastday">{{ preDays - (firstDay - 1 - item) }}</div><!-- 当月 --><div v-for="item in curDays" :key="item + 'cur'" class="curday">{{ item }}</div><!-- 下个月 --><div v-for="item in 7 - nextDays" :key="item + 'next'" class="lastday">{{ item }}</div></div></div>
</template>
<script>
import moment from 'moment';
moment.suppressDeprecationWarnings = true;
export default {data() {return {preDays: 30,nextDays: 7,curYear: moment().year(), //当前年curMonth: moment().month() + 1, //当前月week: ['一', '二', '三', '四', '五', '六', '七'],firstDay: moment(`${moment().year()}-${moment().month() + 1}`).startOf('month').day(), //获取当月第一天是星期几;星期日为 0，星期六为 6curDays: moment().daysInMonth() //获取当月一共有多少天};},mounted() {this.getPreMonthDays();this.getNextMonthDays();},methods: {preMonth() {this.curMonth--;// 如果小于1表示上一年;重置日期if (this.curMonth < 1) {this.curYear--;this.curMonth = 12;}this.curDays = moment(`${this.curYear}-${this.curMonth}`).daysInMonth();this.firstDay = moment(`${this.curYear}-${this.curMonth}`).startOf('month').day();if (this.firstDay == 0) {this.firstDay = 7;}// 显示上个月日期this.getPreMonthDays();this.getNextMonthDays();},nextMonth() {this.curMonth++;// 如果超过12表示下一年;重置日期if (this.curMonth > 12) {this.curYear++;this.curMonth = 1;}this.curDays = moment(`${this.curYear}-${this.curMonth}`).daysInMonth();this.firstDay = moment(`${this.curYear}-${this.curMonth}`).startOf('month').day();if (this.firstDay == 0) {this.firstDay = 7;}// 显示上个月日期this.getPreMonthDays();this.getNextMonthDays();},// 获取上个月剩余天数getPreMonthDays() {if (this.firstDay == 1) return; //表示上个月无剩余天数let month = this.curMonth;let year = this.curYear;month--;if (month == 0) {year--;month = 12;}// 获取上个月的天数const days = moment(`${year}-${month}`).daysInMonth();this.preDays = days;},// 获取下个月要显示的天数getNextMonthDays() {let month = this.curMonth;let year = this.curYear;// 获取当月最后一天是星期几const lastDay = moment(`${year}-${month}`).endOf('month').day();this.nextDays = lastDay == 0 ? 7 : lastDay;}}
};
</script><style lang="scss">
.wrap {width: 700px;height: 100%;.weeks {width: 100%;height: 50px;display: flex;.week {width: 100px;line-height: 50px;text-align: center;background: gainsboro;}}.days {display: flex;flex-wrap: wrap;.lastday,.curday {width: 100px;line-height: 50px;text-align: center;}.lastday {color: gold;}}
}
</style>

3.日历组件增强版------可选择区间日期

思路：通过clickCount记录点击区间次数，默认是0，点击第一次是1，第二次是2；如果clickCount==2重置clickCount=0

页面渲染：通过判断日期是否在选择区间的最大和最小之间，来更改背景色

相比较之前，更新的代码：

方法新增一个点击事件

selectDate(year, day) {this.clickCount++;const date = new Date(`${year}-${this.curMonth}-${day}`);if (this.clickCount == 1) {this.startTime = date;} else if (this.clickCount == 2) {this.endTime = date;this.clickCount = 0;}if (this.endTime && +this.startTime > +this.endTime) {[this.startTime, this.endTime] = [this.endTime, this.startTime];}// console.log(//   this.clickCount,//   moment(this.startTime).format('YYYY-MM-DD'),//   moment(this.endTime).format('YYYY-MM-DD')// );}

  computed: {isSelected() {return (year, day) => {const date = new Date(`${year}-${this.curMonth}-${day}`);return ((+this.startTime <= +date && +this.endTime >= +date) || +date == +this.startTime || +date == +this.endTime);};}},

整体代码：

<template><div class="wrap"><el-button @click="preMonth">上个月</el-button><el-tag>当前年份{{ curYear }}</el-tag><el-tag>当前月份{{ curMonth }}</el-tag><el-button @click="nextMonth">下个月</el-button><div class="weeks"><div v-for="item in week" :key="item" class="week">{{ item }}</div></div><div class="days"><!-- 上个月 --><divv-for="item in firstDay - 1":key="item + 'pre'":class="['lastday', { select: isSelected(curYear - 1, preDays - (firstDay - 1 - item)) }]"@click="selectDate(curYear - 1, preDays - (firstDay - 1 - item))">{{ preDays - (firstDay - 1 - item) }}</div><!-- 当月 --><divv-for="item in curDays":key="item + 'cur'":class="['curday', { select: isSelected(curYear, item) }]"@click="selectDate(curYear, item)">{{ item }}</div><!-- 下个月 --><divv-for="item in 7 - nextDays":key="item + 'next'":class="['lastday', { select: isSelected(curYear + 1, item) }]"@click="selectDate(curYear + 1, item)">{{ item }}</div></div></div>
</template>
<script>
import moment from 'moment';
moment.suppressDeprecationWarnings = true;
export default {data() {return {startTime: null, //记录区间开始时间endTime: null, //记录区间结束时间clickCount: 0, //用于记录点击次数preDays: 30, //上个月天数nextDays: 7, //下个月天数curYear: moment().year(), //当前年curMonth: moment().month() + 1, //当前月week: ['一', '二', '三', '四', '五', '六', '七'],firstDay: moment(`${moment().year()}-${moment().month() + 1}`).startOf('month').day(), //获取当月第一天是星期几;星期日为 0，星期六为 6curDays: moment().daysInMonth() //获取当月一共有多少天};},computed: {isSelected() {return (year, day) => {const date = new Date(`${year}-${this.curMonth}-${day}`);return ((+this.startTime <= +date && +this.endTime >= +date) || +date == +this.startTime || +date == +this.endTime);};}},mounted() {this.getPreMonthDays();this.getNextMonthDays();},methods: {preMonth() {this.curMonth--;// 如果小于1表示上一年;重置日期if (this.curMonth < 1) {this.curYear--;this.curMonth = 12;}this.curDays = moment(`${this.curYear}-${this.curMonth}`).daysInMonth();this.firstDay = moment(`${this.curYear}-${this.curMonth}`).startOf('month').day();if (this.firstDay == 0) {this.firstDay = 7;}// 显示上个月日期this.getPreMonthDays();this.getNextMonthDays();},nextMonth() {this.curMonth++;// 如果超过12表示下一年;重置日期if (this.curMonth > 12) {this.curYear++;this.curMonth = 1;}this.curDays = moment(`${this.curYear}-${this.curMonth}`).daysInMonth();this.firstDay = moment(`${this.curYear}-${this.curMonth}`).startOf('month').day();if (this.firstDay == 0) {this.firstDay = 7;}// 显示上个月日期this.getPreMonthDays();this.getNextMonthDays();},// 获取上个月剩余天数getPreMonthDays() {if (this.firstDay == 1) return; //表示上个月无剩余天数let month = this.curMonth;let year = this.curYear;month--;if (month == 0) {year--;month = 12;}// 获取上个月的天数const days = moment(`${year}-${month}`).daysInMonth();this.preDays = days;},// 获取下个月要显示的天数getNextMonthDays() {let month = this.curMonth;let year = this.curYear;// 获取当月最后一天是星期几const lastDay = moment(`${year}-${month}`).endOf('month').day();this.nextDays = lastDay == 0 ? 7 : lastDay;},selectDate(year, day) {this.clickCount++;const date = new Date(`${year}-${this.curMonth}-${day}`);if (this.clickCount == 1) {this.startTime = date;} else if (this.clickCount == 2) {this.endTime = date;this.clickCount = 0;}if (this.endTime && +this.startTime > +this.endTime) {[this.startTime, this.endTime] = [this.endTime, this.startTime];}// console.log(//   this.clickCount,//   moment(this.startTime).format('YYYY-MM-DD'),//   moment(this.endTime).format('YYYY-MM-DD')// );}}
};
</script><style lang="scss">
.wrap {width: 700px;height: 100%;.weeks {width: 100%;height: 50px;display: flex;.week {width: 100px;line-height: 50px;text-align: center;background: gainsboro;}}.days {display: flex;flex-wrap: wrap;.lastday,.curday {width: 100px;line-height: 50px;text-align: center;cursor: pointer;}.lastday {color: gold;}.select {background: pink;color: #fff;}}
}
</style>