微信小程序开发——日历实现

1.new Date().toLocaleDateString(), //获取当前的时间（年月日）

2. new Date().getFullYear()  //获取年

    new Date().getMonth() + 1, //获取月份

    new Date().getDate(), //获取日期

3.this.getThisMonthDays(year, month)  //获取当月天数

4.this.getLastMonthDays(year, month)   //绘制上个月天数

 this.getNowMonthDays(year, month)  //绘制当月天数

 this.getNextMonthDays(year, month)  //绘制下个月

​
<view class="container">
  <view class="calendar-container">
    <!-- 年月的显示 -->
    <view class="calendar-container-header">
      <view class="date-text">{{year}}年{{month}}月</view>
      <view class="btn-box">
        <view class="btn preBtn" bindtap="changeMonth" data-type="pre"></view>
        <view class="btn nextBtn" bindtap="changeMonth" data-type="next"></view>
      </view>
    </view>
    <!-- 日期的显示 -->
    <view class="calendar-container-body">
      <!-- 显示星期 -->
      <view class="calendar-week">
        <view class="calendar-week-item" wx:for="{{weeksArr}}" wx:key="index">{{item}}</view>
      </view>
      <!-- 显示日期 -->
      <view class="calendar-days">
        <!-- 上个月的日期 -->
        <view class="days-item last-days-item {{item.isNowMonthDay}}" wx:for='{{lastMonthDays}}' wx:key='item' bindtap="selectDate" data-time="{{item.time}}" data-type="lastMonthDays" data-index="{{index}}">{{item.date}}</view>

        <!--当月的日期-->
        <view class="days-item {{item.isNowMonthDay}}" wx:for='{{nowMonthDays}}' wx:key='index' bindtap="selectDate" data-item="{{item}}"  data-type="nowMonthDays" data-index="{{index}}">
          {{item.date}}
        </view>

        <!--下个月的日期-->
        <view class="days-item next-days-item {{item.isNowMonthDay}}" wx:for='{{nextMonthDays}}' wx:key='item' bindtap="selectDate" data-item="{{item}}"  data-type="nextMonthDays" data-index="{{index}}">{{item.date}}</view>
      </view>
    </view>
  </view>
</view>

​

.container{
  padding: 32rpx;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  box-sizing: border-box;
}

/* 日历容器的样式 */
.calendar-container{
   width: 100%;
   /* height: 800rpx; */
   border-radius: 24rpx;
   background-color: #ffffff;
   box-sizing: border-box;
}
/* 日历容器的头部样式 */
.calendar-container .calendar-container-header{
  padding: 24rpx 24rpx 16rpx;
  width: 100%;
  border-bottom: 2rpx solid #cccccc;

  display: flex;
  justify-content: space-between;
  align-items: center;
  
  box-sizing: border-box;
}
 .calendar-container-header .date-text{
  font-weight: 700;
}

/* 切换月份按钮的样式 */
 .calendar-container-header .btn-box {
  width: 130rpx;
  height: 40rpx;
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
}

 .calendar-container-header .btn-box .btn {
  width: 40rpx;
  height: 40rpx;
  background-size: 100% 100%;
  background-position: center center;
  background-repeat: no-repeat;
  border-radius: 50%;
  background-image: url(https://aalq.oss-cn-hangzhou.aliyuncs.com/basketball/arrow-down.png);
}

 .calendar-container-header .btn-box .btn.preBtn {
  transform: rotate(90deg);
}

.calendar-container-header .btn-box .btn.nextBtn {
  transform: rotate(-90deg);
}

/* 日期的显示样式 */
.calendar-container-body {
  margin-top: 16rpx;
  padding-bottom: 64rpx;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

.calendar-container-body .calendar-week {
  display: flex;
  box-sizing: border-box;
}

.calendar-week .calendar-week-item {
  width: calc(686rpx  / 7);
  text-align: center;
  font-size: 32rpx;
  font-weight: 700;
  box-sizing: border-box;
}

/* 日期 */
.calendar-days {
  display: flex;
  flex-wrap: wrap;
  font-size: 28rpx;
  font-weight: 700;
  box-sizing: border-box;
}

.calendar-days .days-item {
  width: calc(686rpx  / 7);
  height: 68rpx;
  text-align: center;
  line-height: 68rpx;
  box-sizing: border-box;
}
.calendar-days .days-item.isNowMonthDay{
  border-radius: 68rpx;
background-color: #28EFD2;
color: #ffffff;
}
.calendar-days .days-item.isNotNowMonthDay{
  border-radius: 68rpx;
  background-color: #cccccc;
  color: #ffffff;
}
.calendar-days .days-item.isActive{
  position: relative;
}
.calendar-days .days-item.isActive::after{
  display: block;
  content: '';
  border:10rpx  solid #28EFD2 ;
  border-top:10rpx  solid transparent ;
  border-left: 10rpx solid transparent;
  position: absolute;
  right: 0;
  bottom: 0;
}
.calendar-days .days-item.last-days-item,
.calendar-days .days-item.next-days-item {
  color: #ccc;
}

Page({
  data: {
    // 本月指的是选择的当前月份
    year: new Date().getFullYear(),
    month: new Date().getMonth() + 1,
    nowMonth: new Date().getMonth() + 1, //本月是几月
    nowDay: new Date().getDate(), //本月当天的日期
    weeksArr: ['日', '一', '二', '三', '四', '五', '六'],
    lastMonthDays: [], //上一个月
    nowMonthDays: [], //本月 
    nextMonthDays: [], //下一个月
    timeDate: new Date().toLocaleDateString(), //当前时间
    lastType: "nowMonthDays", //上一次选中的时间类型,默认为本月
  },
  onShow() {
    let {
      year,
      month
    } = this.data
    this.createDays(year, month)
  },
  //创建时间
  createDays(year, month) {
    this.getLastMonthDays(year, month)
    this.getNowMonthDays(year, month)
    this.getNextMonthDays(year, month)
  },
  //获取当月天数
  getThisMonthDays(year, month) {
    return new Date(year, month, 0).getDate();
  },
  //绘制上个月天数
  getLastMonthDays(year, month) {
    let nowMonthFirstDays = new Date(year, month - 1, 1).getDay()
    let lastMonthDays = []
    if (nowMonthFirstDays) { //判断当月的第一天是不是星期天
      //上个月显示多少天
      let lastMonthNums = month - 1 < 0 ? this.getThisMonthDays(year - 1, 12) : this.getThisMonthDays(year, month - 1); //判断是否会跨年

      //上个月从几号开始显示
      for (let i = lastMonthNums - nowMonthFirstDays + 1; i <= lastMonthNums; i++) {
        let time = new Date(year, month - 2, i).toLocaleDateString() //对应的时间
        lastMonthDays.push({
          date: i, //几号
          week: this.data.weeksArr[new Date(year, month - 2, i).getDay()], //星期几
          time,
          isNowMonthDay: ''
        });
      }
    }
    this.setData({
      lastMonthDays
    })
  },
  //绘制当月天数
  getNowMonthDays(year, month) {
    let {
      nowMonth,
      nowDay
    } = this.data
    let nowMonthDays = []
    let days = this.getThisMonthDays(year, month); //获取当月的天数
    for (let i = 1; i <= days; i++) {
      let time = new Date(year, month - 1, i).toLocaleDateString()
      nowMonthDays.push({
        date: i, //几号
        week: this.data.weeksArr[new Date(year, month - 1, i).getDay()], //星期几
        time,
        isNowMonthDay: (month == nowMonth && i == nowDay) ? "isNowMonthDay" : (i == nowDay) ? "isNotNowMonthDay" : ""
      });
    }
    this.setData({
      nowMonthDays
    })
  },
  //绘制下个月
  getNextMonthDays(year, month) {
    let {
      lastMonthDays,
      nowMonthDays,
    } = this.data
    let nextMonthDays = []
    let nextMonthNums = (lastMonthDays.length + nowMonthDays.length) > 35 ? 42 - (lastMonthDays.length + nowMonthDays.length) : 35 - (lastMonthDays.length + nowMonthDays.length) //下个月显示多少天
    let nowYear = (parseInt(month) + 1) > 12 ? year + 1 : year //下一个月的年份
    let nowMonth = (parseInt(month) + 1) > 12 ? 1 : parseInt(month) + 1 //下一个月的月份
    if (nextMonthNums) { //判断当前天数是否大于零
      for (let i = 1; i <= nextMonthNums; i++) {
        let time = new Date(year, month - 1, i).toLocaleDateString()
        nextMonthDays.push({
          date: i, //几号
          week: this.data.weeksArr[new Date(nowYear, nowMonth - 1, i).getDay()], //星期几
          time,
          isNowMonthDay: ''
        });
      }
    }
    this.setData({
      nextMonthDays
    })
    // console.log(nextMonthDays)
  },
  //切换月份
  changeMonth(e) {
    let {
      year,
      month
    } = this.data
    let type = e.currentTarget.dataset.type //类型
    if (type == 'pre') { //上一个月
      year = month - 1 > 0 ? year : year - 1
      month = month - 1 > 0 ? month - 1 : 12
    } else { //next 下个月
      year = (parseInt(month) + 1) > 12 ? year + 1 : year
      month = (parseInt(month) + 1) > 12 ? 1 : parseInt(month) + 1
    }
    this.setData({
      year,
      month,
      lastType: "nowMonthDays", //切换月份，时间类型默认为本月
    })
    this.createDays(year, month)
  },
  //选择时间
  selectDate(e) {
    let type = e.currentTarget.dataset.type //选择的时间类型
    let index = e.currentTarget.dataset.index //选择的下标
    // console.log("选择的时间",type,index)
    let {
      lastType
    } = this.data
    //将上一次选择的时间类型的 isNowMonthDay 全改为''
    this.data[lastType]?.forEach(item => { 
      item.isNowMonthDay = ''
    })
    this.data[type]?.forEach((item, idx) => {
      if (index == idx) {
        item.isNowMonthDay = (item.time == new Date().toLocaleDateString() ? "isNowMonthDay" : "isNotNowMonthDay"); //判断当前选中的日期是否是当前时间
      } else {
        item.isNowMonthDay = ''
      }
    })
    this.setData({
      [lastType]: this.data[lastType],
      [type]: this.data[type],
      lastType: type
    })
  }
})