小程序实现日历打卡功能_javascript技巧_

        {{'《'}}     {{currentYear}}年{{currentMonth}}月     {{'》'}}           日     一     二     三     四     五     六                           {{item.date}}                                                    回今天           function filterDate(currentPunchCardDate,date){     if(currentPunchCardDate.indexOf(date)!==-1){       return true   }   }   module.exports={     filterDate:filterDate   }   

.calendar {   width: 100%;   background: #fff; }   .pre, .next {   color: #33D4C5;   text-align: center;   line-height: 20px; }   .calendar .tit {   display: flex;   justify-content: center;   align-items: center;   padding: 40rpx 0;   }   .current {   font-size: 32rpx;   color: #2A2A2A; }   .calendar .tit .current {   margin: 0 60rpx; }   .showData {   display: flex;   justify-content: center;   align-items: center;   box-sizing: border-box;   padding-left: 25rpx;   padding-right: 25rpx; }   .showData .week {   width: 14%;   height: 70rpx;   line-height: 70rpx;   text-align: center;   flex-shrink: 0;   font-size: 30rpx;   color: #2A2A2A; }   .calendar .content {   display: flex;   flex-wrap: wrap;   box-sizing: border-box;   padding-left: 25rpx;   padding-right: 25rpx; }   .calendar .content .itemData {   width: 14.2%;   height: 90rpx;   line-height: 90rpx;   flex-shrink: 0;   font-size: 30rpx;   color: #2A2A2A;   text-align: center;   display: flex;   align-items: center;   justify-content: center; }   .calendar .content .icon {   position: relative;   top: -25rpx; }   .calendar .content .gray {   color: #999; }   .currentSelected {   color: #fff;   background: #1CA2FC;   border-radius: 100px; }   .calendar .btn-wrapper {   text-align: right;   background-color: #fff;   width: 100%;   padding-bottom: 10rpx; }   .calendar .btn-wrapper .btn {   border: 1px solid #33D4C5;   padding: 5rpx;   width: 95rpx;   font-size: 21rpx;   color: #33D4C5;   border-radius: 20rpx;   margin-bottom: 15rpx;   position: relative;   left: calc(50% - 100rpx); }

Component({   /**    * 组件的属性列表    */     properties: {     currentPunchCardDate: {       type: Array,       value: []     },     currentYear: { // 当前页面显示的年       type: Number,       value: new Date().getFullYear()     },     currentMonth: { // 当前页面显示的年月       type: Number,       value: new Date().getMonth() + 1     },     nowYear: { // 当前年       type: Number,       value: new Date().getFullYear()     },     nowMonth: { // 当前月       type: Number,       value: new Date().getMonth() + 1     },     nowDate: { // 当前日       type: Number,       value: new Date().getDate()     },     },     /**    * 组件的初始数据    */   data: {     currentMonthDateLen: 0, // 当月天数     preMonthDateLen: 0, // 当月中，上月多余天数     allArr: [], // 35个或42个日期数据=当前显示月所有日期数据+上月残余尾部日期+下月残余头部日期     nowDate: null,     selectedDate: null, //当前选择日期     selectedMonth: null, //当前选择月     selectedYear: null, //当前选择年   },   // 用observers监听properties的属性值   observers: {     'currentPunchCardDate': function (val) {       console.log(val)       }   },   // 在组件实例刚刚被创建时执行   created() {},   // 在组件实例进入页面节点树时执行   ready() {     this.getAllArr()   },   /**    * 组件的方法列表    */   methods: {     // 获取某年某月天数：下个月1日-本月1日      getDateLen(year, month) {       let actualMonth = month - 1;       let timeDistance = new Date(year, month) - new Date(year, actualMonth);       return timeDistance / (1000 * 60 * 60 * 24);     },     // 获取某月1号是周几     getFirstDateWeek(year, month) {       // 0-6，0代表周天       return new Date(year, month - 1, 1).getDay()     },     // 上月     preMonth(year, month) {       if (month == 1) {         return {           year: --year,           month: 12         }       } else {         return {           year: year,           month: --month         }       }     },     // 下月     nextMonth(year, month) {       if (month == 12) {         return {           year: ++year,           month: 1         }       } else {         return {           year: year,           month: ++month         }       }     },     // 获取当月数据，返回数组     getCurrentArr() {       let currentMonthDateLen = this.getDateLen(this.data.currentYear, this.data.currentMonth) // 获取当月天数       let currentMonthDateArr = [] // 定义空数组       if (currentMonthDateLen > 0) {         for (let i = 1; i <= currentMonthDateLen; i++) {           currentMonthDateArr.push({             month: 'current', // 只是为了增加标识，区分上下月             date: i           })         }       }       this.setData({         currentMonthDateLen       })       return currentMonthDateArr     },     // 获取当月中，上月多余的日期数据，返回数组     getPreArr() {       let preMonthDateLen = this.getFirstDateWeek(this.data.currentYear, this.data.currentMonth) // 当月1号是周几 == 上月残余天数）       console.log("preMonthDateLen=", preMonthDateLen);       let preMonthDateArr = [] // 定义空数组       if (preMonthDateLen > 0) {         let {           year,           month         } = this.preMonth(this.data.currentYear, this.data.currentMonth) // 获取上月 年、月         let date = this.getDateLen(year, month) // 获取上月天数         for (let i = 0; i < preMonthDateLen; i++) {           preMonthDateArr.unshift({ // 尾部追加             month: 'pre', // 只是为了增加标识，区分当、下月             date: date           })           date--         }       }       this.setData({         preMonthDateLen       })       return preMonthDateArr     },     // 获取当月中，下月多余的日期数据，返回数组     getNextArr() {       let nextMonthDateLen = 35 - this.data.preMonthDateLen - this.data.currentMonthDateLen // 下月多余天数       console.log(" nextMonthDateLen=", nextMonthDateLen);       let nextMonthDateArr = [] // 定义空数组       if (nextMonthDateLen > 0) {         for (let i = 1; i <= nextMonthDateLen; i++) {           nextMonthDateArr.push({             month: 'next', // 只是为了增加标识，区分当、上月             date: i           })         }       } else if (nextMonthDateLen < 0) {         for (let i = 1; i <= (7 + nextMonthDateLen); i++) {           nextMonthDateArr.push({             month: 'next', // 只是为了增加标识，区分当、上月             date: i           })         }         }       return nextMonthDateArr     },     // 整合当月所有日期数据=上月残余+本月+下月多余     getAllArr() {       let preArr = this.getPreArr()       let currentArr = this.getCurrentArr()       let nextArr = this.getNextArr()       let allArr = [...preArr, ...currentArr, ...nextArr]       this.setData({         allArr       })       let sendObj = {         currentYear: this.data.currentYear,         currentMonth: this.data.currentMonth,         currentDate: this.data.selectedDate,         allArr: this.data.allArr,       }       // 向父组件发送数据       this.triggerEvent('sendObj', sendObj)       },     // 点击 上月     gotoPreMonth() {       let {         year,         month       } = this.preMonth(this.data.currentYear, this.data.currentMonth)       this.setData({         currentYear: year,         currentMonth: month,       })       this.getAllArr()     },     // 点击 下月     gotoNextMonth() {       let {         year,         month       } = this.nextMonth(this.data.currentYear, this.data.currentMonth)       this.setData({         currentYear: year,         currentMonth: month,       })       this.getAllArr()     }
                
提示：
                    本文由神整理自网络，如有侵权请联系本站删除！
                    

                    本站声明： 

                    1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持； 

                    2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！
                
                

                

                                            
上一篇：微信小程序自定义导航的方法_javascript技巧_
                                                                
下一篇：React中react-redux和路由详解_React_