?

1.new?Date().toLocaleDateString(),?//獲取當(dāng)前的時(shí)間（年月日）

2.?new?Date().getFullYear()? //獲取年

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

????new?Date().getDate(),?//獲取日期

3.this.getThisMonthDays(year,?month)? //獲取當(dāng)月天數(shù)

4.this.getLastMonthDays(year,?month)???//繪制上個(gè)月天數(shù)

?this.getNowMonthDays(year,?month)??//繪制當(dāng)月天數(shù)

?this.getNextMonthDays(year,?month)??//繪制下個(gè)月文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-585337.html

?
<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">
        <!-- 上個(gè)月的日期 -->
        <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>

        <!--當(dāng)月的日期-->
        <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>

        <!--下個(gè)月的日期-->
        <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: {
    // 本月指的是選擇的當(dāng)前月份
    year: new Date().getFullYear(),
    month: new Date().getMonth() + 1,
    nowMonth: new Date().getMonth() + 1, //本月是幾月
    nowDay: new Date().getDate(), //本月當(dāng)天的日期
    weeksArr: ['日', '一', '二', '三', '四', '五', '六'],
    lastMonthDays: [], //上一個(gè)月
    nowMonthDays: [], //本月 
    nextMonthDays: [], //下一個(gè)月
    timeDate: new Date().toLocaleDateString(), //當(dāng)前時(shí)間
    lastType: "nowMonthDays", //上一次選中的時(shí)間類型,默認(rèn)為本月
  },
  onShow() {
    let {
      year,
      month
    } = this.data
    this.createDays(year, month)
  },
  //創(chuàng)建時(shí)間
  createDays(year, month) {
    this.getLastMonthDays(year, month)
    this.getNowMonthDays(year, month)
    this.getNextMonthDays(year, month)
  },
  //獲取當(dāng)月天數(shù)
  getThisMonthDays(year, month) {
    return new Date(year, month, 0).getDate();
  },
  //繪制上個(gè)月天數(shù)
  getLastMonthDays(year, month) {
    let nowMonthFirstDays = new Date(year, month - 1, 1).getDay()
    let lastMonthDays = []
    if (nowMonthFirstDays) { //判斷當(dāng)月的第一天是不是星期天
      //上個(gè)月顯示多少天
      let lastMonthNums = month - 1 < 0 ? this.getThisMonthDays(year - 1, 12) : this.getThisMonthDays(year, month - 1); //判斷是否會(huì)跨年

      //上個(gè)月從幾號(hào)開始顯示
      for (let i = lastMonthNums - nowMonthFirstDays + 1; i <= lastMonthNums; i++) {
        let time = new Date(year, month - 2, i).toLocaleDateString() //對(duì)應(yīng)的時(shí)間
        lastMonthDays.push({
          date: i, //幾號(hào)
          week: this.data.weeksArr[new Date(year, month - 2, i).getDay()], //星期幾
          time,
          isNowMonthDay: ''
        });
      }
    }
    this.setData({
      lastMonthDays
    })
  },
  //繪制當(dāng)月天數(shù)
  getNowMonthDays(year, month) {
    let {
      nowMonth,
      nowDay
    } = this.data
    let nowMonthDays = []
    let days = this.getThisMonthDays(year, month); //獲取當(dāng)月的天數(shù)
    for (let i = 1; i <= days; i++) {
      let time = new Date(year, month - 1, i).toLocaleDateString()
      nowMonthDays.push({
        date: i, //幾號(hào)
        week: this.data.weeksArr[new Date(year, month - 1, i).getDay()], //星期幾
        time,
        isNowMonthDay: (month == nowMonth && i == nowDay) ? "isNowMonthDay" : (i == nowDay) ? "isNotNowMonthDay" : ""
      });
    }
    this.setData({
      nowMonthDays
    })
  },
  //繪制下個(gè)月
  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) //下個(gè)月顯示多少天
    let nowYear = (parseInt(month) + 1) > 12 ? year + 1 : year //下一個(gè)月的年份
    let nowMonth = (parseInt(month) + 1) > 12 ? 1 : parseInt(month) + 1 //下一個(gè)月的月份
    if (nextMonthNums) { //判斷當(dāng)前天數(shù)是否大于零
      for (let i = 1; i <= nextMonthNums; i++) {
        let time = new Date(year, month - 1, i).toLocaleDateString()
        nextMonthDays.push({
          date: i, //幾號(hào)
          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') { //上一個(gè)月
      year = month - 1 > 0 ? year : year - 1
      month = month - 1 > 0 ? month - 1 : 12
    } else { //next 下個(gè)月
      year = (parseInt(month) + 1) > 12 ? year + 1 : year
      month = (parseInt(month) + 1) > 12 ? 1 : parseInt(month) + 1
    }
    this.setData({
      year,
      month,
      lastType: "nowMonthDays", //切換月份，時(shí)間類型默認(rèn)為本月
    })
    this.createDays(year, month)
  },
  //選擇時(shí)間
  selectDate(e) {
    let type = e.currentTarget.dataset.type //選擇的時(shí)間類型
    let index = e.currentTarget.dataset.index //選擇的下標(biāo)
    // console.log("選擇的時(shí)間",type,index)
    let {
      lastType
    } = this.data
    //將上一次選擇的時(shí)間類型的 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"); //判斷當(dāng)前選中的日期是否是當(dāng)前時(shí)間
      } else {
        item.isNowMonthDay = ''
      }
    })
    this.setData({
      [lastType]: this.data[lastType],
      [type]: this.data[type],
      lastType: type
    })
  }
})

到了這里，關(guān)于微信小程序開發(fā)——日歷實(shí)現(xiàn)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！