根据前面的日历，又遇到到个好玩的日历需求，分享给大家
这是个带年月左右选取的日历展示！并且当天的对应日会被高亮显示！下面看下实现代码！
1.wxml代码结构
<view> <view> <view> <view bindtap='lastMonth'> <image src='https://www.jb51.net/images/nextMonth.png' mode='aspectFit'></image> </view> {{year}}年{{month}}月 <view bindtap='nextMonth'> <image src='https://www.jb51.net/images/nextMonth.png' mode='aspectFit'></image> </view> </view> </view> <view> <view wx:for='{{date}}'>{{item}}<view></view></view> </view> <view> <view wx:for='{{dateArr}}' data-date='{{item.isToday}}'> <view> <view>{{item.dateNum}}</view> </view> <view>{{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); } })