怎么在小程序中實(shí)現(xiàn)帶年月選取效果的日歷？很多新手對(duì)此不是很清楚，為了幫助大家解決這個(gè)難題，下面小編將為大家詳細(xì)講解，有這方面需求的人可以來(lái)學(xué)習(xí)下，希望你能有所收獲。

10年積累的成都網(wǎng)站制作、做網(wǎng)站經(jīng)驗(yàn)，可以快速應(yīng)對(duì)客戶(hù)對(duì)網(wǎng)站的新想法和需求。提供各種問(wèn)題對(duì)應(yīng)的解決方案。讓選擇我們的客戶(hù)得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識(shí)你，你也不認(rèn)識(shí)我。但先網(wǎng)站制作后付款的網(wǎng)站建設(shè)流程，更有海曙免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

1.wxml代碼結(jié)構(gòu)

 
   
     
       
         
       
      {{year}}年{{month}}月 
       
         
       
     
   
   
    {{item}} 
   
   
          
       
        {{item.dateNum}} 
       
      {{item.weight}} 
     
   

2.wxss代碼結(jié)構(gòu)

.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 

//index.js 
//獲取應(yīng)用實(shí)例 
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){ 
    //全部時(shí)間的月份都是按0~11基準(zhǔn)，顯示月份才+1 
    let dateArr = [];            //需要遍歷的日歷數(shù)組數(shù)據(jù) 
    let arrLen = 0;             //dateArr的數(shù)組長(zhǎng)度 
    let now = setYear ? new Date(setYear,setMonth) : new Date(); 
    let year = setYear || now.getFullYear(); 
    let nextYear = 0; 
    let month = setMonth || now.getMonth();         //沒(méi)有+1方便后面計(jì)算當(dāng)月總天數(shù) 
    let nextMonth = (month + 1) > 11 ? 1 : (month + 1);    
    let startWeek = new Date( year+','+(month + 1)+','+1).getDay();             //目標(biāo)月1號(hào)對(duì)應(yīng)的星期 
    let dayNums = new Date(year,nextMonth,0).getDate();       //獲取目標(biāo)月有多少天 
    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(){ 
    //全部時(shí)間的月份都是按0~11基準(zhǔn)，顯示月份才+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(){ 
    //全部時(shí)間的月份都是按0~11基準(zhǔn)，顯示月份才+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); 
  } 
})

看完上述內(nèi)容是否對(duì)您有幫助呢？如果還想對(duì)相關(guān)知識(shí)有進(jìn)一步的了解或閱讀更多相關(guān)文章，請(qǐng)關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司行業(yè)資訊頻道，感謝您對(duì)創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司的支持。

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線(xiàn)，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、網(wǎng)站設(shè)計(jì)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性?xún)r(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專(zhuān)為企業(yè)上云打造定制，能夠滿(mǎn)足用戶(hù)豐富、多元化的應(yīng)用場(chǎng)景需求。

分享文章：怎么在小程序中實(shí)現(xiàn)帶年月選取效果的日歷-創(chuàng)新互聯(lián)
網(wǎng)頁(yè)地址：http://weahome.cn/article/ecsso.html