一、功能描述
实现日历功能
二、 代码实现
1. index.wxml
1 <view class='wrap'> 2 <view> 3 <view class='date-show'> 4 <view class='lt-arrow' bindtap='lastMonth'> 5 <image src='/images/left_arrow.png' mode='aspectFit'></image> 6 </view> 7 {{year}}年{{month}}月 8 <view class='rt-arrow' bindtap='nextMonth'> 9 <image src='/images/right_arrow.png' mode='aspectFit'></image> 10 </view> 11 </view> 12 </view> 13 <view class='header'> 14 <view wx:for='{{date}}' class='{{(index == todayIndex) && isTodayWeek ? "weekMark" : ""}}'>{{item}}<view></view></view> 15 </view> 16 <view class='date-box'> 17 <view wx:for='{{dateArr}}' class='{{isToday == item.isToday ? "nowDay" : ""}}' data-date='{{item.isToday}}'> 18 <view class='date-head'> 19 <view>{{item.dateNum}}</view> 20 </view> 21 <!-- <view class='date-weight'>{{item.weight}}</view> --> 22 </view> 23 </view> 24 </view>
2. index.js
1 Page({ 2 data: { 3 year: 0, 4 month: 0, 5 date: ['日', '一', '二', '三', '四', '五', '六'], 6 dateArr: [], 7 isToday: 0, 8 isTodayWeek: false, 9 todayIndex: 0 10 }, 11 onLoad: function () { 12 let now = new Date(); 13 let year = now.getFullYear(); 14 let month = now.getMonth() + 1; 15 this.dateInit(); 16 this.setData({ 17 year: year, 18 month: month, 19 isToday: '' + year + month + now.getDate() 20 }) 21 }, 22 dateInit: function (setYear, setMonth) { 23 //全部时间的月份都是按0~11基准，显示月份才+1 24 let dateArr = []; //需要遍历的日历数组数据 25 let arrLen = 0; //dateArr的数组长度 26 let now = setYear ? new Date(setYear, setMonth) : new Date(); 27 let year = setYear || now.getFullYear(); 28 let nextYear = 0; 29 let month = setMonth || now.getMonth(); //没有+1方便后面计算当月总天数 30 let nextMonth = (month + 1) > 11 ? 1 : (month + 1); 31 let startWeek = new Date(year + ',' + (month + 1) + ',' + 1).getDay(); //目标月1号对应的星期 32 let dayNums = new Date(year, nextMonth, 0).getDate(); //获取目标月有多少天 33 let obj = {}; 34 let num = 0; 35 36 if (month + 1 > 11) { 37 nextYear = year + 1; 38 dayNums = new Date(nextYear, nextMonth, 0).getDate(); 39 } 40 arrLen = startWeek + dayNums; 41 for (let i = 0; i < arrLen; i++) { 42 if (i >= startWeek) { 43 num = i - startWeek + 1; 44 obj = { 45 isToday: '' + year + (month + 1) + num, 46 dateNum: num, 47 weight: 5 48 } 49 } else { 50 obj = {}; 51 } 52 dateArr[i] = obj; 53 } 54 this.setData({ 55 dateArr: dateArr 56 }) 57 58 let nowDate = new Date(); 59 let nowYear = nowDate.getFullYear(); 60 let nowMonth = nowDate.getMonth() + 1; 61 let nowWeek = nowDate.getDay(); 62 let getYear = setYear || nowYear; 63 let getMonth = setMonth >= 0 ? (setMonth + 1) : nowMonth; 64 65 if (nowYear == getYear && nowMonth == getMonth) { 66 this.setData({ 67 isTodayWeek: true, 68 todayIndex: nowWeek 69 }) 70 } else { 71 this.setData({ 72 isTodayWeek: false, 73 todayIndex: -1 74 }) 75 } 76 }, 77 lastMonth: function () { 78 //全部时间的月份都是按0~11基准，显示月份才+1 79 let year = this.data.month - 2 < 0 ? this.data.year - 1 : this.data.year; 80 let month = this.data.month - 2 < 0 ? 11 : this.data.month - 2; 81 this.setData({ 82 year: year, 83 month: (month + 1) 84 }) 85 this.dateInit(year, month); 86 }, 87 nextMonth: function () { 88 //全部时间的月份都是按0~11基准，显示月份才+1 89 let year = this.data.month > 11 ? this.data.year + 1 : this.data.year; 90 let month = this.data.month > 11 ? 0 : this.data.month; 91 this.setData({ 92 year: year, 93 month: (month + 1) 94 }) 95 this.dateInit(year, month); 96 } 97 })
3. index.wxss
1 .date-show{ 2 position: relative; 3 width: 250rpx; 4 font-family: PingFang-SC-Regular; 5 font-size: 40rpx; 6 color: #282828; 7 text-align: center; 8 margin: 59rpx auto 10rpx; 9 } 10 .lt-arrow,.rt-arrow{ 11 position: absolute; 12 top: 1rpx; 13 width: 60rpx; 14 height: 60rpx; 15 padding-right: 0.6rem; 16 } 17 .lt-arrow image,.rt-arrow image{ 18 width: 40rpx; 19 height: 40rpx; 20 } 21 .lt-arrow{ 22 left: -110rpx; 23 /* transform: rotate(180deg); */ 24 } 25 .rt-arrow{ 26 right: -100rpx; 27 } 28 .header{ 29 font-size: 0; 30 padding: 0 24rpx; 31 } 32 .header>view{ 33 display: inline-block; 34 width: 14.285%; 35 color: #333; 36 font-size: 30rpx; 37 text-align: center; 38 border-bottom: 1px solid #D0D0D0; 39 padding: 39rpx 0; 40 } 41 .weekMark{ 42 position: relative; 43 } 44 .weekMark view{ 45 position: absolute; 46 bottom: 0; 47 left: 0; 48 width: 100%; 49 border-bottom: 1px solid #22A7F6; 50 } 51 .date-box{ 52 font-size: 0; 53 padding: 10rpx 0; 54 } 55 .date-box>view{ 56 position: relative; 57 display: inline-block; 58 width: 14.285%; 59 color: #020202; 60 font-size: 40rpx; 61 text-align: center; 62 vertical-align: middle; 63 margin: 15rpx 0; 64 } 65 .date-head{ 66 height: 60rpx; 67 line-height: 60rpx; 68 font-size: 26rpx; 69 } 70 .nowDay .date-head{ 71 width: 60rpx; 72 border-radius: 50%; 73 text-align: center; 74 color: #fff; 75 background-color: #22A7F6; 76 margin: 0 auto; 77 } 78 .date-weight{ 79 font-size: 22rpx; 80 padding: 15rpx 0; 81 } 82 .nowDay .date-weight{ 83 color: #22A7F6; 84 } 85 .one{ 86 position: absolute; 87 bottom: 0; 88 right: 5rpx; 89 width: 20rpx; 90 height: 20rpx; 91 border-radius: 50%; 92 background-color: red; 93 } 94 .two{ 95 position: absolute; 96 bottom: 30rpx; 97 right: 5rpx; 98 width: 20rpx; 99 height: 20rpx; 100 border-radius: 50%; 101 background-color: blue; 102 }