大部分人都弄錯(cuò)！小程序預(yù)約時(shí)間日歷(微信小程序日歷打卡)

微信小程序之自定義日歷組件

我們單位實(shí)行的大小周工作制，即大周休息2天，小周消息一天。因這點(diǎn)小特殊，總有同事常記錯(cuò)周六這天是否上班。也因這點(diǎn)，在程序上需要特別體現(xiàn)出大小周的提示，于是需要設(shè)計(jì)一個(gè)日歷組件，并在日歷上標(biāo)注出排班名稱和大小周。最終實(shí)現(xiàn)圖如下:微信小程序demo提供了一個(gè)簡(jiǎn)單的日歷組件，vant也提供了一個(gè)日歷組件，在github上也有一些日歷組件，我試用了一番，都多少存在一些不符合之處。重點(diǎn)說(shuō)一下vant，它有幾個(gè)問(wèn)題：一是加載數(shù)據(jù)太大，一運(yùn)行就加載至少一年以上的數(shù)據(jù)；二是樣式不好控制，大小相修改一下就會(huì)變形；三是在日期上下方加文字不方便。因?yàn)闆](méi)有找到太好的組件可以引用，就自己想設(shè)計(jì)一個(gè)能方便控制的，遂有下面的設(shè)計(jì)，1、采用grid組件顯示日期，分三行，中間一行為日期具體天的數(shù)字，上面一行顯示大小周提示、下面一行顯示排班名稱2、采用scroll-view動(dòng)態(tài)包含grid數(shù)目3、一行顯示幾天，可以動(dòng)態(tài)設(shè)置3、日歷結(jié)構(gòu)體4、具體每個(gè)月的日歷算法獲取某個(gè)月的第一天和最后一天，再獲取每天的星期數(shù)，循環(huán)放到grid結(jié)構(gòu)體中優(yōu)點(diǎn)：一是加載數(shù)據(jù)量少，可控制；二是顯示內(nèi)容豐富，可以控制；三是也是顯示可以使用slot，更加豐富缺點(diǎn)：一不是專業(yè)日歷組件，樣式簡(jiǎn)單了些；二是加載數(shù)據(jù)量有限，grid自身也是一個(gè)組件，加載多了額外的開(kāi)銷肯定大起來(lái)。

小程序手寫日歷

不需要調(diào)接口，想要渲染幾個(gè)月的數(shù)據(jù)，手動(dòng)傳入即可根據(jù)思否 Peggy7這篇文章改了一下。{{canlendar_data[cur].year}}年{{canlendar_data[cur].month}}月{{item}}{{item.fullDate>=nowDate && item.fullDate<=maxDate &&!item.available?'滿':''}}{{checkDate===item.fullDate ? '已選' : ''}}{{item.day?item.day:''}}{{rule}}提 交import {imgObj}from '@/utils/imgs'import httpsfrom '@/utils/common'const {get,throttle}=https;let hotel_id='',timer=null,cur_year='',cur_month='',cur_day='',arr=[];export default {data () {return {imgObj:imgObj,rule:'',disable:true,//按鈕是否可點(diǎn)擊week_list: ['日','一','二','三','四','五','六'],checkDate:'',//選擇的日期cur:0,//第幾個(gè)月份nowDate:'',//今天maxDate:'',//最大日期canlendar_data:[]onLoad(options){hotel_id=options.hotelId;// let {spa_date}=this.$store.state;// this.checkDate=spa_date.date[0]+'-'+spa_date.date[1]+'-'+spa_date.date[2];this.getDate_();const date =new Date();cur_year = date.getFullYear();cur_month = date.getMonth() +1;cur_day = date.getDate();let month = cur_month.toString().length ===1 ?`0${cur_month}` : cur_month;let day = cur_day.toString().length ===1 ?`0${cur_day}` : cur_day;let nowDate =`${cur_year}-${month}-${day}`;this.nowDate=nowDate;onUnload(){//this.reset();clearTimeout(timer);methods: {reset(){this.rule='';this.checkDate='';goPrevMonth(){if(this.cur==0){return false}else{this.cur--goNextMonth(){if(this.cur==(this.canlendar_data.length-1)){return false}else{this.cur++chooseDate(e) {const available = e.currentTarget.dataset.available;const fullDate = e.currentTarget.dataset.fulldate;if(!available) {return false;}else{this.checkDate=fullDate;}// chooseTheDate(data,index){//this.theCheck=data;//this.theCheckIndex=index;//this.disable=false;async getDate_() {const loginResult =await get('api_v2/free/reservation',{hotel_id:hotel_idif (loginResult.code==200) {let data=loginResult.data;let newBrr=[];data.options.map((n,index)=>{let tomo =new Date();tomo.setTime(tomo.getTime() + index *24 *60 *60 *1000);//1天 以后let tomoYear=tomo.getFullYear(),tomoMonth=tomo.getMonth() +1,tomoDate=tomo.getDate();tomoMonth=tomoMonth<10?'0'+tomoMonth:tomoMonth;tomoDate=tomoDate<10?'0'+tomoDate:tomoDate;newBrr.push({val:tomoYear+'-'+tomoMonth+'-'+tomoDate,flag:nthis.maxDate=newBrr[newBrr.length-1].val;arr=newBrr;this.fillCalendar(6);this.rule=data.rule.replace(/\\n/g,"\n");this.disable=false;}submitFree:throttle(async function() {wx.showLoading({title:'',mask:true})let {checkDate}=this;let that=this;if(checkDate==''){wx.showToast({title:'請(qǐng)選擇預(yù)約日期',icon:'none',duration:2000})return false;}const loginResult =await get('api_v2/free/submit',{hotel_id:hotel_id,estimated_at:checkDateif (loginResult.code==200) {wx.hideLoading();let data=loginResult.data;let orderid=data.order_id;that.goOrderdetail(orderid);that.$fire.fire('alreadyFree');}goBack(){wx.navigateBack({delta:1})goOrderdetail:throttle(function(id) {wx.redirectTo({url:'/pages/orderdetailspa/index?orderId='+id// 獲取每月總天數(shù)getAllDaysOfMonth(year,month) {return new Date(year,month,0).getDate();// 獲取每月第一天是星期幾getFirstDayOfMonth(year,month) {return new Date(year, month -1, 1).getDay();// 計(jì)算本月前空了幾格getEmptyGrids(year,month) {// FirstDayOfMonth代表本月的第一天是星期幾const FirstDayOfMonth =this.getFirstDayOfMonth(year, month);let emptyGrids = [];// 有空格的情況if (FirstDayOfMonth >0) {for (let i =0; i < FirstDayOfMonth; i++) {emptyGrids.push({'num':'','fullDate':'x'? //x是我自己定義的一個(gè)值，代表沒(méi)有日期});}// 將空格放入數(shù)組return emptyGrids;}else{// 否則返回一個(gè)新數(shù)組return [];}// 計(jì)算本月日歷getDaysOfThisMonth(year,month) {let days = [];const AllDaysOfMonth =this.getAllDaysOfMonth(year, month);let fullMonth = month.toString().length ===1 ?`0${month}`:month;for (let i =0; i < AllDaysOfMonth; i++) {let day = i+1, fullDay = day,fullDate='';fullDay = fullDay.toString().length ===1 ?`0${day}` : fullDay;fullDate=`${year}-${fullMonth}-${fullDay}`;let obj={fullDay,fullDate,'available':true}for(let j=0;jif(fullDate==arr[j].val){obj.available=arr[j].flag}days.push(obj);}// 返回每個(gè)月的具體日期return days;// 循環(huán)渲染日歷// 從本月開(kāi)始渲染，n代表包括本月開(kāi)始連續(xù)渲染幾個(gè)月fillCalendar(n) {let year = cur_year, month = cur_month, fullMonth, canlendar_data = [];// 計(jì)算年月以及具體日歷for (let i = cur_month; i < cur_month + n; i++) {let EmptyGrids =this.getEmptyGrids(year, month);let DaysOfThisMonth =this.getDaysOfThisMonth(year, month);// 把空格和具體日歷合為一個(gè)數(shù)組let allDays = [...EmptyGrids, ...DaysOfThisMonth];// 對(duì)年份和月份的計(jì)算做一些判斷if (month >12) {year++;month =1;fullMonth ='01'canlendar_data.push({month,fullMonth,allDays });month++;}else{fullMonth = month.toString().length ===1 ?`0${month}` : month;canlendar_data.push({month,fullMonth,allDays });month++;}this.canlendar_data=canlendar_data;