前端之家收集整理的这篇文章主要介绍了
小程序实现带年月选取效果的日历，
前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。
本文实例为大家分享了小程序日历展示的具体代码，供大家参考，具体内容如下
根据前面的日历，又遇到到个好玩的日历需求，分享给大家
这是个带年月左右选取的日历展示！并且当天的对应日会被高亮显示！下面看下实现代码！
1.wxml代码结构
{{year}}年{{month}}月
{{item.dateNum}}
{{item.weight}}
2.wxss代码结构
<div class="jb51code">
<pre class="brush:css;">
.date-show{
position: relative;
width: 250rpx;
font-family: PingFang-SC-Regular;
font-size: 40rpx;
color: #282828;
text-align: center;
margin: 59rpx auto 10rpx;
}
.lt-arrow,.rt-arrow{
position: absolute;
top: 1rpx;
width: 60rpx;
height: 60rpx;
}
.lt-arrow image,.rt-arrow image{
width: 14rpx;
height: 26rpx;
}
.lt-arrow{
left: -110rpx;
transform: rotate(180deg);
}
.rt-arrow{
right: -100rpx;
}
.header{
font-size: 0;
padding: 0 24rpx;
}
.header>view{
display: inline-block;
width: 14.285%;
color: #333;
font-size: 30rpx;
text-align: center;
border-bottom: 1px solid #D0D0D0;
padding: 39rpx 0;
}
.weekMark{
position: relative;
}
.weekMark view{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
border-bottom: 1px solid #22A7F6;
}
.date-Box{
font-size: 0;
padding: 10rpx 0;
}
.date-Box>view{
position: relative;
display: inline-block;
width: 14.285%;
color: #020202;
font-size: 40rpx;
text-align: center;
vertical-align: middle;
margin: 15rpx 0;
}
.date-head{
height: 60rpx;
line-height: 60rpx;
font-size: 26rpx;
}
.nowDay .date-head{
width: 60rpx;
border-radius: 50%;
text-align: center;
color: #fff;
background-color: #22A7F6;
margin: 0 auto;
}
.date-weight{
font-size: 22rpx;
padding: 15rpx 0;
}
.nowDay .date-weight{
color: #22A7F6;
}
.one{
position: absolute;
bottom: 0;
right: 5rpx;
width: 20rpx;
height: 20rpx;
border-radius: 50%;
background-color: red;
}
.two{
position: absolute;
bottom: 30rpx;
right: 5rpx;
width: 20rpx;
height: 20rpx;
border-radius: 50%;
background-color: blue;
}
Page({
data: {
year: 0,month: 0,date: ['日','一','二','三','四','五','六'],dateArr: [],isToday: 0,isTodayWeek: false,todayIndex: 0
},onLoad: function () {
let now = new Date();
let year = now.getFullYear();
let month = now.getMonth() + 1;
this.dateInit();
this.setData({
year: year,month: month,isToday: '' + year + month + now.getDate()
})
},dateInit: function(setYear,setMonth){
//全部时间的月份都是按0~11基准，显示月份才+1
let dateArr = []; //需要遍历的日历数组数据
let arrLen = 0; //dateArr的数组长度
let now = setYear ? new Date(setYear,setMonth) : new Date();
let year = setYear || now.getFullYear();
let nextYear = 0;
let month = setMonth || now.getMonth(); //没有+1方便后面计算当月总天数
let nextMonth = (month + 1) > 11 ? 1 : (month + 1);
let startWeek = new Date( year+','+(month + 1)+','+1).getDay(); //目标月1号对应的星期
let dayNums = new Date(year,nextMonth,0).getDate(); //
获取目标月有多少天
let obj = {};
let num = 0;
if(month + 1 > 11){
nextYear = year + 1;
dayNums = new Date(nextYear,0).getDate();
}
arrLen = startWeek + dayNums;
for(let i = 0; i < arrLen; i++){
if(i >= startWeek){
num = i - startWeek + 1;
obj = {
isToday: '' + year + (month + 1) + num,dateNum: num,weight: 5
}
}else{
obj = {};
}
dateArr[i] = obj;
}
this.setData({
dateArr: dateArr
})
let nowDate = new Date();
let nowYear = nowDate.getFullYear();
let nowMonth = nowDate.getMonth() + 1;
let nowWeek = nowDate.getDay();
let getYear = setYear || nowYear;
let getMonth = setMonth >= 0 ? (setMonth + 1) : nowMonth;
if (nowYear == getYear && nowMonth == getMonth){
this.setData({
isTodayWeek: true,todayIndex: nowWeek
})
}else{
this.setData({
isTodayWeek: false,todayIndex: -1
})
}
},lastMonth: function(){
//全部时间的月份都是按0~11基准，显示月份才+1
let year = this.data.month - 2 < 0 ? this.data.year - 1 : this.data.year;
let month = this.data.month - 2 < 0 ? 11 : this.data.month - 2;
this.setData({
year: year,month: (month + 1)
})
this.dateInit(year,month);
},nextMonth: function(){
//全部时间的月份都是按0~11基准，显示月份才+1
let year = this.data.month > 11 ? this.data.year + 1 : this.data.year;
let month = this.data.month > 11 ? 0 : this.data.month;
this.setData({
year: year,month);
}
})
