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

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

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

 

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

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

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