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

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

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

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

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

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