怎么在小程序中實現帶年月選取效果的日歷

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

1.wxml代碼結構

<view class='wrap'> 
  <view> 
    <view class='date-show'> 
      <view class='lt-arrow' bindtap='lastMonth'> 
        <image src='../images/nextMonth.png' mode='aspectFit'></image> 
      </view> 
      {{year}}年{{month}}月 
      <view class='rt-arrow' bindtap='nextMonth'> 
        <image src='../images/nextMonth.png' mode='aspectFit'></image> 
      </view> 
    </view> 
  </view> 
  <view class='header'> 
    <view wx:for='{{date}}' class='{{(index == todayIndex) && isTodayWeek ? "weekMark" : ""}}'>{{item}}<view></view></view> 
  </view> 
  <view class='date-box'> 
    <view wx:for='{{dateArr}}' class='{{isToday == item.isToday ? "nowDay" : ""}}' data-date='{{item.isToday}}'>      
      <view class='date-head'> 
        <view>{{item.dateNum}}</view> 
      </view> 
      <view class='date-weight'>{{item.weight}}</view> 
    </view> 
  </view> 
</view>

2.wxss代碼結構

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

看完上述內容是否對您有幫助呢？如果還想對相關知識有進一步的了解或閱讀更多相關文章，請關注億速云行業資訊頻道，感謝您對億速云的支持。