这两天项目中有个日历的需求，先上效果图~~
在这之前都看到很多的日历，个人觉得比较麻烦。然后自己就意淫了一个写法，暂时是没有发现什么bug。唯一一点不足的是以6*7的表格显示，但也可以单独处理
整体的思路也比较简单不用区分闰年平年。主要就是以下几点。
1，确定每个月的一号是星期几
2，确定上个月的天数
上代码
1，定义三个变量，分别用来表示年，月，以及存放当月的日期的数组
year: '',
mon: '',
nonnumber: []
2，js部分
getmondate() { //初始化使用
let nowdate = new Date()
console.log(moment(nowdate).format('YYYY-MM-DD'))
this.year = nowdate.getFullYear()
this.mon = nowdate.getMonth() + 1
this.getnowmonth()
},
getnowmonth() { //日历生成
var d = new Date(this.year, this.mon, 0)
var ld = new Date(this.year, this.mon - 1, 0)
let lastday = d.getDate()
let lastmon = ld.getDate()
var week1 = new Date(`${this.year}-${this.mon}-1`).getDay()
if (week1 === 0) {
week1 = 7
}
for (let i = 0; i < week1; i++) {
this.nonnumber.unshift({'day': lastmon, 'classname': 'othermon', 'data': false, 'number': 0, 'disable': true})
lastmon--
}
for (let a = 0; a < lastday; a++) {
this.nonnumber.push({'day': a + 1, 'classname': 'nowmon', 'data': false, 'number': 0, 'disable': true})
}
for (let j = 0; j < (42 - week1 - lastday); j++) {
this.nonnumber.push({'day': j + 1, 'classname': 'othermon', 'data': false, 'number': 0, 'disable': true})
}
},
3.渲染部分
<div class="data">
<div class="header">
<div class="last" @click="changedete('last')">上个月</div><div>{{year}}年{{mon}}月</div><div class="next" @click="changedete('next')">下个月</div>
</div>
<div class="contetndate">
<div class="contetndateWeek">
<li>日</li>
<li>一</li>
<li>二</li>
<li>三</li>
<li>四</li>
<li>五</li>
<li>六</li>
</div>
<div class="contetndateday" v-if="nonnumber.length > 0">
<li v-for="item in nonnumber" :class="`${item.data ? '' : 'disale'} ${item.classname}`">
<div class="dayinfo" :class="item.data ? 'isinfo' : ''">
{{item.day}}
<span v-if="item.data">{{item.number}}</span>
</div></li>
</div>
</div>
</div>
4.切换月份函数
changedete(e) {
this.nonnumber = []
if (e === 'next') {
if (this.mon === 12) {
this.year++
this.mon = 1
this.getnowmonth()
} else {
this.mon++
this.getnowmonth()
}
} else {
if (this.mon === 1) {
this.year--
this.mon = 12
this.getnowmonth()
} else {
this.mon--
this.getnowmonth()
}
}
},
5 css(写的less 大佬些动动小手改下嘛)
.disale{
cursor:not-allowed;
user-select:none;
// pointer-events: none;
// cursor: default;
// opacity: 0.6;
}
.isinfo{
border:1px solid red;
border-radius: 50%;
cursor: pointer;
}
.othermon{
color: #999!important;
}
.data{
width: 300px;
.header{
display: flex;
text-align: center;
margin-top: 10px;
margin-bottom: 10px;
justify-content: space-between;
}
.contetndate{
.contetndateWeek{
margin-bottom: 10px;
display: flex;
flex-wrap:wrap;
justify-content: space-between;
>li{
width: 40px;
height: 40px;
line-height: 40px;
font-size: 12px;
text-align: center;
}
}
.contetndateday{
display: flex;
flex-wrap:wrap;
height: 300px;
justify-content: space-between;
li{
// width: 14%;
padding: 5px;
font-size: 12px;
color: #999;
box-sizing: border-box;
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
>.dayinfo{
width: 30px;
height: 30px;
line-height: 30px;
position: relative;
>span{
position: absolute;
top: -13px;
right:-6px;
}
}
}
}
}
}
6，如需要切换年份 重新赋值data里面的year 再次调用getnowmonth（）重新生成就好了 年度的都一个意思。
