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

╰+攻爆jí腚メ 2022-05-12 02:54 240阅读 0赞

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

![70][]

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

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

本文转自：[https://blog.csdn.net/qq\_24308471/article/details/79481118][https_blog.csdn.net_qq_24308471_article_details_79481118]

[70]: /images/20220512/f45d5c4b15ca4a67b4802bb3b207a5fe.png
[https_blog.csdn.net_qq_24308471_article_details_79481118]: https://blog.csdn.net/qq_24308471/article/details/79481118