小程序实现带年月选取效果的日历


            本文实例为大家分享了小程序日历展示的具体代码，供大家参考，具体内容如下

根据前面的日历，又遇到到个好玩的日历需求，分享给大家

 

这是个带年月左右选取的日历展示！并且当天的对应日会被高亮显示！下面看下实现代码！

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); 

  } 

}) 



以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持中文源码网。