vue实现日历组件
时间：2022-07-15 08:36:54 | 栏目：vue | 点击：次
基于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>