微信小程序自定义日历组件

wxml

  <view class="maskWrap" bindtap="close"></view><view class="calContent"><view class="itemLine header-box"><view bindtap="changeDate" data-type="preYear">《</view><view bindtap="changeDate" data-type="preMonth">《</view><view>{{nowYear + "-" + (nowMonth >= 10 ? nowMonth : "0" + nowMonth)}}</view><view bindtap="changeDate" data-type="nextMonth">》</view><view bindtap="changeDate" data-type="nextYear">》</view></view><!-- 星期展示 --><view class="week-row"><text class="week-item" wx:for="{{weekDay}}" wx:key="index">{{item}}</text></view><!-- 日期内容 --><view class="day-row" wx:for="{{totalDay}}"  wx:key="index"><view class="day-item {{subItem.today?'day-today':''}}{{index === todayIndex && subIndex === innerIndex ? 'day-other' :''}}{{subItem.otherMonth?'day-otherMonth':''}}"  wx:for="{{item}}" wx:for-item="subItem" wx:key="subIndex"  wx:for-index="subIndex" bindtap="clickIItem" data-date="{{index}}" data-itemdate="{{subIndex}}"><text>{{subItem.day}}</text></view></view></view>

wxss

/*遮罩弹层背景*/
.maskWrap{width: 100%;height: 100%;background: rgba(0,0,0,0.40);position: fixed;top: 0;left: 0;display: flex;flex-direction: column;z-index: 999;overflow: hidden;
}
/* 日历模块 */
.calContent{background: #ffffff;width: 100%;padding-bottom:20rpx;box-sizing: border-box;position: fixed;top: 0;z-index: 99999;
}
/* 星期 */
.header-box{width: 100%;display: flex;align-items: center;justify-content: space-around;padding: 30rpx 0;box-sizing: border-box;
}
.week-row {width: 100%;display: flex;justify-content: space-between;align-items: center;
}
.week-item {width: 50rpx;height: 50rpx;text-align: center;line-height: 50rpx;font-size: 24rpx;font-weight: bold;color: #000000;
}
/* 日期 */
.day-row {width: 100%;display: flex;justify-content: space-between;align-items: center;margin-top: 20rpx;
}
.day-item {width: 50rpx;height: 50rpx;text-align: center;line-height: 50rpx;font-size: 24rpx;font-weight: bold;color: #000000;border-radius: 50%;box-sizing: border-box;
}
.day-today {background: #008866;color: #fff;
}
.day-otherMonth {color: #cdcdcd;
}
.day-other{background:#cdcdcd;color: #333333;
}
.calContent_top{text-align: right;margin-right: 20rpx;margin-top: 10rpx;
}
.calContent_top image{width: 25rpx;height: 30rpx;
}

Component({/*** 组件的属性列表*/properties: {calendarList:Object,},/*** 组件的初始数据*/data: {weekDay: ['日', '一', '二', '三', '四', '五', '六'],nowYear: new Date().getFullYear(), // 年份nowMonth: new Date().getMonth() + 1, // 月份totalDay:[],//日期maxDayList: [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31],//一年12个月，每个月的天数，初始化都给平年date: new Date().getDate(),innerIndex:-1,todayIndex:-1,showMask:true,//是否遮罩层},/*** 组件的方法列表*/methods: {/*** 切换年、月*/changeDate(e) {let type = e.currentTarget.dataset.type;let nowYear = this.data.nowYear;let nowMonth = this.data.nowMonth;switch(type) {case "preYear": //上一年nowYear -= 1; this.setData({nowYear});break;case "preMonth": //上一月nowMonth -= 1;if(nowMonth <= 0) {nowMonth = 12;nowYear -= 1;}break;case "nextMonth": //下一月nowMonth += 1;if(nowMonth >= 13) {nowMonth = 1;nowYear += 1;}break;case "nextYear": //下一年nowYear += 1;break;}this.setData({nowYear, nowMonth});this.initCalendar();},/*** 初始化日历*/initCalendar() {let maxDayList = this.data.maxDayList;let year = this.data.nowYear, month = this.data.nowMonth;if((year%4 == 0 && year%100 != 0) || year%400 == 0) {//计算当前年是不是闰年，规则：能被4整除且不被100整除，或者能被400整除的年份maxDayList[1] = 29;//2月份29天}else {//平年maxDayList[1] = 28;//2月份28天}this.setData({maxDayList});let firstDayWeek = new Date(year + "/" + month + "/1").getDay() ;//当前月的1号是星期几firstDayWeek = firstDayWeek > 0 ? firstDayWeek : 7;//星期日从0转成7let endDayWeek = new Date(year + "/" + month + "/" +maxDayList[month - 1]).getDay();//当前月最后一天是星期几endDayWeek = endDayWeek > 0 ? endDayWeek : 7;//星期日从0转成7let beforArr = [], afterArr = [];//beforArr：本月1号之前需要补充上个月月尾几天，afterArr：本月尾补充下个月月初几天//求出补充的上个月的日子for(let i=0; i<firstDayWeek; i++) {//找出1号之前的空缺上个月的尾数日,比如今天是周三，则i=3-1, 取前两天的日子let deffTime = (i+1)*24*60*60*1000; //缺的天数的毫秒值let firstTime = new Date(year + "/" + month + "/1").getTime();//本月1号的毫秒值beforArr[i] = {otherMonth: true, day: new Date(firstTime - deffTime).getDate()};//从对应月份的尾数天开始存，比如31，30，29... }beforArr = beforArr.reverse();//将补的上月的日子翻转//求出补充的下个月的日子for(let i=0; i<7-endDayWeek; i++) {//找出月尾对应的星期几，看看到周日还差几天就从下个月月初补几天afterArr[i] = {otherMonth: true, day: i+1};}let nowMonthArr = [];//当前月所有日子for(let i=0; i<maxDayList[month - 1]; i++) {nowMonthArr[i] = {day: i+1};if(year == new Date().getFullYear()) {//如果切换到了本年本月本日，则凸显今日if(month == new Date().getMonth() + 1) {if(new Date().getDate() == i+1) {nowMonthArr[i].today = true;}}}}let totalDayList = beforArr.concat(nowMonthArr).concat(afterArr);//将所有日期拼接let totalDay = [], arr = [];//totalDay:最终用来展示数据，arr：用来分割每一周的日子for(let i=0; i<totalDayList.length; i++) {arr.push(totalDayList[i]);if((i+1)%7 == 0) {//每7天存为一组totalDay.push(arr);arr = [];//存完清空}}this.setData({totalDay});},//设置切换日期clickIItem(e){let date = e.currentTarget.dataset.date;let itemdate = e.currentTarget.dataset.itemdate;let dates = this.data.totalDay[date][itemdate].otherMonthif(!dates){this.setData({todayIndex : date,innerIndex : itemdate})}},// 关闭遮罩层close() {this.triggerEvent('closeCalendar')},},lifetimes: {attached: function() {this.initCalendar()},},})

####父组件

  <!-- 日历组件 --><calendar wx:if="{{showCalendar}}" calendarList="{{calendarList}}" bindchangeDate="changeDate" bindinitCalendar="initCalendar" bindcloseCalendar="closeCalendar"></calendar>

.json

  "usingComponents": {"calendar":"/components/calendar/index"},

微信小程序自定义日历组件相关推荐

微信小程序自定义标签组件component封装、组件生命周期，组件通信
微信小程序自定义标签组件component封装.组件生命周期,组件通信本文来说下小程序的自定义标签组件封装. 相比于vue,react的非路由组件,微信小程序的component组件要麻烦些,而且生 ...
微信小程序引入日历组件
GitHub - treadpit/wx_calendar: 微信小程序-日历组件
微信小程序自定义音频组件，自定义滚动条，单曲循环，循环播放
小程序自定义音频组件,带滚动条摘要:首先自定义音频组件,是因为产品有这样的需求,需要如下样式的而微信小程序API给我们提供的就是这样的而且产品需要小程序有后台播放功能,所以我们不考虑小程序的 a ...
微信小程序-自定义NavBar组件
组件化组件化本身是一个可以讲的很大,也可以浓缩为封装可复用的,模版组件基于mvvm的微信小程序当然也支持这一特性,我们做项目的时候也可以把注入公用的header footer之类的封一封(其实工 ...
微信小程序简单日历组件
微信小程序简单的日历组件代码:  <view class='cld'><view class="cld-top">< ...
微信小程序自定义倒计时组件及注意事项
倒计时功能实现:微信小程序实现倒计时功能(超简单)_洛潆的博客-CSDN博客_微信小程序倒计时功能由于要在多个页面使用倒计时功能,在每个页面都重新写一遍就会很麻烦,所以可以把它封装为自定义组件,最终 ...
微信小程序自定义弹窗组件
看微信小程序的文档觉得说的不是很清楚.于是,找到这篇文章,觉得挺好看.大家可以看看: https://www.cnblogs.com/demod... 补充: 还需要在popup.json文件添加一句 ...
微信小程序自定义波浪组件
最近看到好多app上有波浪背景,有动态的,有静态的,这里是在小程序中用得动态. 先看看效果图:里面的文本是组件内部定义的. 这是用两个svg的图片用css关键帧动画做的效果(这里谢谢子弹短信里前端群的 ...
微信小程序自定义弹窗组件 action-sheet
最近公司在开发短剧小程序,短剧的剧集展示交互需要用到组件 action-sheet,小程序自带的有这个组件,但是这个组件支持的功能比较单一,相当于是一个选择表一样,不能自定义很多内容,只能自定义一个组 ...

微信小程序自定义日历组件

微信小程序自定义日历组件

微信小程序自定义日历组件相关推荐

最新文章

热门文章