小程序实现带年月选取效果的日历

本文实例为大家分享了小程序日历展示的具体代码，供大家参考，具体内容如下根据前面的

本文实例为大家分享了小程序日历展示的具体代码，供大家参考，具体内容如下

根据前面的日历，又遇到到个好玩的日历需求，分享给大家

这是个带年月左右选取的日历展示！并且当天的对应日会被高亮显示！下面看下实现代码！

1.wxml代码结构

<view class='wrap'> 
 <view> 
 <view class='date-show'> 
 <view class='lt-arrow' bindtap='lastMonth'> 
 <image src='../images/nextMonth.png' mode='aspectFit'></image> 
 </view> 
 {{year}}年{{month}}月 
 <view class='rt-arrow' bindtap='nextMonth'> 
 <image src='../images/nextMonth.png' mode='aspectFit'></image> 
 </view> 
 </view> 
 </view> 
 <view class='header'> 
 <view wx:for='{{date}}' class='{{(index == todayIndex) && isTodayWeek ? "weekMark" : ""}}'>{{item}}<view></view></view> 
 </view> 
 <view class='date-box'> 
 <view wx:for='{{dateArr}}' class='{{isToday == item.isToday ? "nowDay" : ""}}' data-date='{{item.isToday}}'> 
 <view class='date-head'> 
 <view>{{item.dateNum}}</view> 
 </view> 
 <view class='date-weight'>{{item.weight}}</view> 
 </view> 
 </view> 
</view> 

2.wxss代码结构

.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; 
} 

index.js 

//index.js 
//获取应用实例 
const app = getApp() 
 
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,nextMonth,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: (month + 1) 
 }) 
 this.dateInit(year, month); 
 } 
}) 

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。