vue实现日历组件

来源：jb51　　时间：2022/4/18 12:05:15　　对本文有异议

基于VUE实现日历组件，供大家参考，具体内容如下

年和月份是使用输入框来切换的，没有做成选择框，??和??切换月份，红色选取是选取的日期
实现思路和网上的大多数一样，首先是把月份的天数存进一个数组，

monthDay:[31,'',31,30,31,30,31,31,30,31,30,31],

由于二月的天数是不确定的，所以就先设置为空

然后去求选择的月份的第一天是星期几，通过 Date.getDay()函数，这个函数有一个注意事项，就是如果是星期天，他会返回0，这需要我们自己去处理一下

图中，2019年1月1号是星期二，所以前面就要给它一个空格块
下面代码中第一层循环就是在循环空格块，spaceDay表示需要几个空格

<p v-for="item in spaceDay" :key="item.id"></p>
<p v-for="(item,idx) in (monthDay[this.month-1] || 30)" @click="setDay(idx)" :class="idx==activeDay?'active':''" :key="item.id">{{item}}</p>

下面贴出完整代码

<template>
? ? <div id="calender">
? ? ? ? <div class="txt-c p-10">
? ? ? ? ? ? <span @click="prev"> ?? </span>
? ? ? ? ? ? <input type="text" v-model="year">年
? ? ? ? ? ? <input type="text" v-model="month" class="month">月
? ? ? ? ? ? <span @click="next"> ????? </span>
? ? ? ? </div>
? ? ? ? <div class="weekDay flex jc-sb p-5 day" >
? ? ? ? ? ? <p v-for="item in weekList" :key="item.id">{{item}}</p>
? ? ? ? </div>
? ? ? ? <div class="weekDay flex p-5 day">
? ? ? ? ? ? <p v-for="item in spaceDay" :key="item.id"></p>
? ? ? ? ? ? <p v-for="(item,idx) in (monthDay[this.month-1] || 30)" @click="setDay(idx)" :class="idx==activeDay?'active':''" :key="item.id">{{item}}</p>
? ? ? ? </div>
? ? </div>
</template>
 
<script>
? ? export default {
? ? ? ? name: "calender",
? ? ? ? data(){
? ? ? ? ? ? return{
? ? ? ? ? ? ? ? year: '', // 年份
? ? ? ? ? ? ? ? month: '', // 月份
? ? ? ? ? ? ? ? day: '', // 天数
? ? ? ? ? ? ? ? current: '', // 当前时间
? ? ? ? ? ? ? ? weekList:['周一','周二','周三','周四','周五','周六','周日'],
? ? ? ? ? ? ? ? monthDay:[31,'',31,30,31,30,31,31,30,31,30,31],
? ? ? ? ? ? ? ? activeDay: '', // 选中的日期
? ? ? ? ? ? ? ? spaceDay: '', // 每个月第一天是星期几
? ? ? ? ? ? ? ? February:'' // 判断2月份的天数
? ? ? ? ? ? }
? ? ? ? },
? ? ? ? created(){
? ? ? ? ? ? this.current = new Date()
? ? ? ? ? ? this.getTheCurrentDate()
? ? ? ? ? ? this.getMonthFisrtDay()
? ? ? ? ? ? this.February = this.isLeapYear(this.year) ? 28 : 29
? ? ? ? ? ? this.monthDay.splice(1,1,this.February)
? ? ? ? },
? ? ? ? watch:{
? ? ? ? ? month(){
? ? ? ? ? ? ? if(this.month>12||this.month<1){
? ? ? ? ? ? ? ? ? console.log('请输入正确月份')
? ? ? ? ? ? ? ? ? return
? ? ? ? ? ? ? }
? ? ? ? ? ? ? this.getMonthFisrtDay()
? ? ? ? ? },
? ? ? ? ? year(){
? ? ? ? ? ? ? this.getMonthFisrtDay()
? ? ? ? ? }
? ? ? ? },
? ? ? ? methods:{
? ? ? ? ? ? // 判断是否是闰年
? ? ? ? ? ? isLeapYear(year){
? ? ? ? ? ??
? ? ? ? ? ? ? ? return year % 4 == 0 && year % 100 != 0 ||year % 400 == 0;
? ? ? ? ? ? },
? ? ? ? ? ? // 选取特定天数
? ? ? ? ? ? setDay(idx){
? ? ? ? ? ? ? ? this.activeDay = idx
? ? ? ? ? ? ? ? this.day = idx + 1
? ? ? ? ? ? ? ? console.log('选择的日期是'+this.year+' '+this.month+' '+this.day)
? ? ? ? ? ? },
? ? ? ? ? ? // 判断月份的第一天是星期几
? ? ? ? ? ? getMonthFisrtDay(){
? ? ? ? ? ? ? ? var firstDayOfCurrentMonth = new Date(this.year,this.month-1,1) // 某年某月的第一天
? ? ? ? ? ? ? ? if(firstDayOfCurrentMonth.getDay() == 0){
? ? ? ? ? ? ? ? ? ? this.spaceDay = 6
? ? ? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? ? ? this.spaceDay = firstDayOfCurrentMonth.getDay() - 1
? ? ? ? ? ? ? ? }
? ? ? ? ? ? },
? ? ? ? ? ? // 获取当前的日期
? ? ? ? ? ? getTheCurrentDate(){
? ? ? ? ? ? ? ? this.year = this.current.getFullYear()
? ? ? ? ? ? ? ? this.month = this.current.getMonth() + 1
? ? ? ? ? ? ? ? this.day = this.current.getDate()
? ? ? ? ? ? },
? ? ? ? ? ? prev(){
? ? ? ? ? ? ? ? if(this.month==1){
? ? ? ? ? ? ? ? ? ? this.year--
? ? ? ? ? ? ? ? ? ? this.month=12
? ? ? ? ? ? ? ? }else{
? ? ? ? ? ? ? ? ? ? this.month--
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? this.activeDay = 0
? ? ? ? ? ? ? ? this.getMonthFisrtDay()
? ? ? ? ? ? },
? ? ? ? ? ? next(){
? ? ? ? ? ? ? ? if(this.month==12){
? ? ? ? ? ? ? ? ? ? this.year++
? ? ? ? ? ? ? ? ? ? this.month=1
? ? ? ? ? ? ? ? }else{
? ? ? ? ? ? ? ? ? ? this.month++
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? this.activeDay = 0
? ? ? ? ? ? ? ? this.getMonthFisrtDay()
? ? ? ? ? ? }
? ? ? ? }
? ? }
</script>
 
<style lang="scss" scoped>
#calender{
? ? .txt-c{
? ? ? ? text-align: center;
? ? }
? ? .p-10{
? ? ? ? padding: 2rem;
? ? }
? ? .p-5{
? ? ? ? padding: 1rem;
? ? }
? ? .flex {
? ? ? ? display: flex;
? ? }
? ? .jc-sb{
? ? ? ? justify-content: space-between;
? ? }
? ? input{
? ? ? ? width: 50px;
? ? ? ? &.month{
? ? ? ? ? ? width: 30px;
? ? ? ? }
? ? }
? ? .day{
? ? ? ? flex-wrap: wrap;
? ? ? ? p{
? ? ? ? ? ? width: 14.28%;
? ? ? ? ? ? /*flex: 0 0 0 ;*/
? ? ? ? ? ? text-align: center;
? ? ? ? ? ? line-height: 2.4rem;
? ? ? ? ? ? height: 2.4rem;
? ? ? ? ? ? position: relative;
? ? ? ? ? ? z-index: 100;
? ? ? ? ? ? &.active{
? ? ? ? ? ? ? ? color: #fff;
? ? ? ? ? ? }
? ? ? ? ? ? &.active:before{
? ? ? ? ? ? ? ? content: '';
? ? ? ? ? ? ? ? height: 2.5rem;
? ? ? ? ? ? ? ? width: 2.5rem;
? ? ? ? ? ? ? ? position: absolute;
? ? ? ? ? ? ? ? z-index: -1;
? ? ? ? ? ? ? ? left: 0;
? ? ? ? ? ? ? ? top: 0;
? ? ? ? ? ? ? ? transform: translateX(50%);
? ? ? ? ? ? ? ? border-radius: 50%;
? ? ? ? ? ? ? ? background: #e97163;
? ? ? ? ? ? ? ? color: #fff;
? ? ? ? ? ? }
? ? ? ? }
? ? }
}
</style>