本文實例為大家分享了小程序自定義日歷展示的具體代碼，供大家參考，具體內容如下

重點在于將數個月的日期拆分重組，然后再統一以月為輸出。詳細操作代碼注釋有說明。

<view class="flex box box-tb box-align-center"><!--整體日期循環部分 --><block wx:for="{{allMan}}" wx:for-item="item" > <view class="calendar pink-color box box-tb">  <view class="top-handle fs28 box box-lr box-align-center box-pack-center">   <view class="date-area box box-lr box-align-center box-pack-center years-month">{{item.year || "--"}} 年 {{item.Month || "--"}} 月</view>  </view>  <!--展示星期幾的頭部 -->  <view class="weeks box box-lr box-pack-center box-align-center day-week">   <view class="flex week fs28" wx:for="{{weeks_ch}}" wx:key="{{index}}" data-idx="{{index}}">{{item}}</view>  </view>  <view class="days box box-lr box-wrap">   <view class="grid white-color box box-align-center box-pack-center" wx:for="{{item.empyt}}" wx:key="{{index}}" data-idx="{{index}}">   </view>   <!--循環日期 -->   <block wx:for="{{item.day}}" wx:for-item="item" wx:key="{{index}}">    <view class="grid white-color box box-align-center box-pack-center" data-idx="{{index}}" data-dayz="{{item.dayZ}}" bindtap="{{item.canChoosed ? 'tapDayItemX' : ''}}">    <view class="day {{item.dependence ? 'border-instinct pink-bg' : ''}} {{item.startDay ? 'border-radius dependence-bg' : ''}} {{item.endDay ? 'border-right-radius dependence-bg' : ''}} {{item.canChoosed ? '' : 'grays'}} box box-align-center box-pack-center">     {{item.today}}    </view>    </view>   </block>  </view> </view></block></view>

.js:

let choose_year = null,//選擇的年 choose_month = null;//選擇的月let clickNum=new Array();//點擊日期的次數，做顯示判斷處理let date = new Date();let cur_year = date.getFullYear();let cur_month = date.getMonth() + 1;let weeks_ch = ['日', '一', '二', '三', '四', '五', '六']; //日歷的顯示let allMan = new Array();//循環總日歷容器let haveClickNum=false;//是否可點擊選擇日期let havInitDate = false;//是否已經重置數據let conf = {//拿去給Page onLoad() { if (allMan.length != 0) {//重新進入界面發現已經有數據，直接渲染  havInitDate = false;  clickNum = new Array();  haveClickNum = true;  this.setData({  allMan,  weeks_ch  }) }else{  allMan = new Array();//非常重要的主輸出，計算好的每月數據都合拼在里面  clickNum = new Array();  let that = this;  let empytGrids = this.calculateEmptyGrids(cur_year, cur_month);//計算空格  let days = this.calculateDays(cur_year, cur_month);//計算日期總數  let DogDays = { year: cur_year, Month: cur_month, empyt: empytGrids, day: days };//組裝年、月、星期一前的空格、日  allMan.push(DogDays);  let newMonth = cur_month + 1;  let newYear = cur_year;  if (newMonth > 12) {//新年重置1月份  newYear = cur_year + 1;  newMonth = 1;  }  let empytGridsTwos = this.calculateEmptyGridsTwo(newYear, newMonth);//計算新月份的空格  let dayTwos = this.calculateDaysTwo(newYear, newMonth);//計算日期總數  let catDays = { year: newYear, Month: newMonth, empyt: empytGridsTwos, day: dayTwos };  allMan.push(catDays);  let sakura = days.concat(dayTwos);//將存放日期的內容統一合并為數組，單獨處理是否可選等展示狀態，屬于中間件數組  let isTrue = new Array();//存放可選  for (var i = 0; i < sakura.length; i++) {//循環處理  if (sakura[i].canChoosed == true) {   isTrue.push(sakura[i]);  } else {   continue  }  }  let addMoreMonth = function () {//添加更多的月份  let isTrue = new Array();//是否可選的日期數組，為N個月等可選日期總日輸做判斷  for (var i = 0; i < sakura.length; i++) {   if (sakura[i].canChoosed == true) {   isTrue.push(sakura[i]);   } else {   continue   }  }  let newMonthThree = newMonth + 1;  let newYearThree = newYear;  if (newMonthThree > 12) {   newYearThree = newYear + 1;   newMonthThree = 1;  }  let empytGridsThree = that.calculateEmptyGridsTwo(newYearThree, newMonthThree);//計算空格  let dayThree = that.calculateDaysTwo(newYearThree, newMonthThree, 91 - isTrue.length);//計算日期總數,61減，今天不算  let duckDays = { year: newYearThree, Month: newMonthThree, empyt: empytGridsThree, day: dayThree };  sakura = sakura.concat(dayThree);  allMan.push(duckDays);  if (parseInt(91 - isTrue.length) > parseInt(dayThree.length)) {//第n個月是否足夠顯示需要的可選日期長度   for (var i = 0; i < dayThree.length; i++) {   if (dayThree[i].canChoosed == true) {    isTrue.push(dayThree[i]);   } else {    continue   }   }   let newMonthFour = newMonthThree + 1;   let newYearFour = newYearThree;   if (newMonthFour > 12) {   newYearFour = newYearThree + 1;   newMonthFour = 1;   }   let empytGridsFour = that.calculateEmptyGridsTwo(newYearFour, newMonthFour);//計算空格   let dayFour = that.calculateDaysTwo(newYearFour, newMonthFour, 91 - isTrue.length);//計算日期總數,61減，今天不算   let wolfDays = { year: newYearFour, Month: newMonthFour, empyt: empytGridsFour, day: dayFour };   sakura = sakura.concat(dayFour);   allMan.push(wolfDays);  } else {//不足夠繼續增加第n+1個月   let newMonthFour = newMonthThree + 1;   let newYearFour = newYearThree;   if (newMonthFour > 12) {   newYearFour = newYearThree + 1;   newMonthFour = 1;   }   let empytGridsFour = that.calculateEmptyGridsTwo(newYearFour, newMonthFour);//計算空格   let dayFour = that.calculateDaysTwo(newYearFour, newMonthFour, -1);//計算日期總數,61減，今天不算   let wolfDays = { year: newYearFour, Month: newMonthFour, empyt: empytGridsFour, day: dayFour };   sakura = sakura.concat(dayFour);   allMan.push(wolfDays);  }  }  if (isTrue.length < 90) {  addMoreMonth();  }  this.setData({  allMan,  weeks_ch  }) } }, onShow: function () { // console.log(allMan); // allMan = new Array();//循環總日歷容器 // 頁面顯示 }, getThisMonthDays(year, month) { return new Date(year, month, 0).getDate(); }, getFirstDayOfWeek(year, month) { return new Date(Date.UTC(year, month - 1, 1)).getDay(); }, calculateEmptyGrids(year, month) { let firstDayOfWeek = this.getFirstDayOfWeek(year, month); let empytGrids = []; if (firstDayOfWeek > 0) { for (let i = 0; i < firstDayOfWeek; i++) { empytGrids.push(i); } } return (empytGrids); }, calculateEmptyGridsTwo(year, month) { let firstDayOfWeek = this.getFirstDayOfWeek(year, month); let empytGridsTwo = []; if (firstDayOfWeek > 0) {  for (let i = 0; i < firstDayOfWeek; i++) {  empytGridsTwo.push(i);  } } return (empytGridsTwo); }, calculateDays(year, month) { let days = []; let date = new Date(); let thisMonthDays = this.getThisMonthDays(year, month);//這個月的總日數 let d = date.getDate(); let weeHours=date.getHours(); let zaa = year+month+date.getDate(); for (let i = 1; i <= thisMonthDays; i++) {  if (year+month+i == zaa){  days.push({   day: i,   dayZ: cur_year+"-"+cur_month+"-"+i,   choosed: false,   canChoosed: true,   today: i  });  } else if (year + month + i < zaa){  if (weeHours <= 2 && year + month + i == zaa-1){//加個判斷:是否凌晨3點之前，是的話就拿日期集-1來對前一日可選   days.push({   day: i,   dayZ: cur_year + "-" + cur_month + "-" + i,   choosed: false,   canChoosed: true,   today: i   });   }else{   days.push({   day: i,   dayZ: cur_year + "-" + cur_month + "-" + i,   choosed: false,   canChoosed: false,   today: i   });   }  } else{  days.push({   day: i,   dayZ: cur_year + "-" + cur_month + "-" + i,   choosed: false,   canChoosed: true,   today: i  });  } } this.setData({ // days }); return (days); }, calculateDaysTwo(year, month,takeNum) { let days_two = []; let date = new Date(); let thisMonthDays = this.getThisMonthDays(year, month); let d = date.getDate(); let zaa = year+"-"+month+"-"+date.getDate(); if (takeNum) {  console.log(takeNum); } for (let i = 1; i <= thisMonthDays; i++) {  takeNum--;  if (takeNum<0){  days_two.push({   day: i,   dayZ: year + "-" + month + "-" + i,   choosed: false,   canChoosed: false,   today: i  });  }else{  days_two.push({   day: i,   dayZ: year + "-" + month + "-" + i,   choosed: false,   canChoosed: true,   today: i  });  } } this.setData({  // days_two }); return (days_two); },  handleCalendar(e) { let handle = e.currentTarget.dataset.handle; let cur_year = this.data.cur_year; let cur_month = this.data.cur_month; if (handle === 'prev') { let newMonth = cur_month - 1; let newYear = cur_year; if (newMonth < 1) { newYear = cur_year - 1; newMonth = 12; }  this.calculateDays(newYear, newMonth); this.calculateEmptyGrids(newYear, newMonth);  this.setData({ cur_year: newYear, cur_month: newMonth });  } else { let newMonth = cur_month + 1; let newYear = cur_year; if (newMonth > 12) { newYear = cur_year + 1; newMonth = 1; }  this.calculateDays(newYear, newMonth); this.calculateEmptyGrids(newYear, newMonth);  this.setData({ cur_year: newYear, cur_month: newMonth }); } }, tapDayItemX(e) {//點擊日期處理 if (clickNum.length >= 2)//點了兩次，不可再點  return; if (haveClickNum){//是否已經選擇過日期  this.initChosedDate();//重置選擇過的樣式  let dayZ = e.currentTarget.dataset.dayz;  for (let i = 0; i < allMan.length; i++) {  let li = allMan[i].day;  for (let k = 0; k < li.length; k++) {   if (li[k].dayZ == dayZ) {   if (clickNum.length == 0) {    li[k].startDay = true;   }   if (clickNum.length == 1) {    li[k].endDay = true;   }   }else{//已選擇的區間日期重置   li[k].dependence = false;   }  }  }  this.setData({//渲染  allMan  })  clickNum.push(integerDate(dayZ));//格式化日期，準備拿去比較函數處理 }else{//第一次進入生命周期，從沒選擇過的處理  let dayZ = e.currentTarget.dataset.dayz;  for (let i = 0; i < allMan.length; i++) {  let li = allMan[i].day;  for (let k = 0; k < li.length; k++) {   if (li[k].dayZ == dayZ) {   if (clickNum.length == 0) {    li[k].startDay = true;   }   if (clickNum.length == 1) {    li[k].endDay = true;   }   }  }  }  this.setData({//渲染  allMan  })  clickNum.push(integerDate(dayZ));//格式化日期，準備拿去比較函數處理 } if (clickNum.length < 2)//點擊了第二次，進行teturn下面的渲染操作  return clickNum.sort(compare);//拿去比較函數處理 let dayDiff = GetDateDiff(clickNum[0], clickNum[1]); let startDay = clickNum[0];//第一位為開始日期 let startMonth = new Date(clickNum[0]).getMonth() + 1;//開始的月，跨月顯示用 let formatStartDay = new Date(clickNum[0]).getFullYear() + '-' + startMonth + '-' + new Date(clickNum[0]).getDate();//格式化開始日期，后面用于給總輸出allman做判斷 let endMonth = new Date(clickNum[1]).getMonth() + 1;//結束的月，跨月顯示用 let formatEndDay = new Date(clickNum[1]).getFullYear() + '-' + endMonth + '-' + new Date(clickNum[1]).getDate();//格式化結束日期，后面用于給總輸出allman做判斷 let endDay = clickNum[1];//第二位為結束日期 for (let i = 0; i < allMan.length; i++) {//循環總輸出allMan數組得出每月的日期數組，將開始、結束日期帶進去做改變顯示狀態處理  let li = allMan[i].day;  for (let k = 0; k < li.length; k++) {//每個月的日期數組，拆分更細  let foxDay = integerDate(li[k].dayZ);  if (startDay < foxDay && foxDay < endDay){   li[k].dependence = true;//已選擇的區間日期  } else if (li[k].dayZ == formatStartDay){//開始日期狀態處理   li[k].startDay = true;   li[k].endDay = false;  } else if (li[k].dayZ == formatEndDay) {//結束日期狀態處理   li[k].startDay = false;   li[k].endDay = true;  }  } } this.setData({//再渲染  allMan })  wx.navigateBack({  delta: 1,  }) }, initChosedDate(){ if (havInitDate) return for (let i = 0; i < allMan.length; i++) {  let li = allMan[i].day;  for (let k = 0; k < li.length; k++) {   li[k].startDay = false;   li[k].endDay = false;  } } havInitDate=true; },}; Page(conf);let compare = function (x, y) {//比較函數，那個日期誰先誰后，star/end if (x < y) { return -1; } else if (x > y) { return 1; } else { return 0; }} function GetDateDiff(startDate, endDate) { let dates = Math.abs((startDate - endDate)) / (1000 * 60 * 60 * 24); return dates;} function integerDate(choseDate){ let integerDay = new Date(Date.parse(choseDate.replace(/-/g, "/"))).getTime(); return integerDay;}