小程序日历（带年月选取效果）

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

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

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
//获取应用实例
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);
	}
})