在微信小程序中写个日历吧

微信小程序中自带得日期选择器用起来很舒服，但是不太适合项目，日历插件也是比较简单得东西，就随手写了一个。话不多说，先上demo。

---

日历最重要的就是日期正确。
我们写日历的时候只需要知道几个因素就行：

• 该月有多少天
• 该月的一号是周几

知道这两个信息之后，我们的日历就会自动空出相应的格数，并依次展示出剩余的日期。

获取该月天数

当我们打开日历时，首先出现的肯定是当前日期。
那我们就先创建一个获取当前日期的函数：

initDay() {
      let date = new Date()
       //获取当前的年月日
      let currentYear = date.getFullYear(),
         currentMonth = date.getMonth(),
         currentDay = date.getDate()
      //获取当年，当月的天数 getDate()，此时month+1
      let monthNum = new Date(currentYear, currentMonth + 1, 0).getDate()
       //获取该月1号是周几，getDay(),注意此时month不加1
      let week = new Date(currentYear, currentMonth, 1).getDay()
      this.setData({
         currentYear: currentYear,
         currentMonth: currentMonth,
         currentDay: currentDay,
         monthNum: monthNum,
         week: week,
         //这里的now代表今天对应的日期，存在data中，
         //点击回到今天时再从data中取出
         nowYear: currentYear,
         nowMonth: currentMonth,
         nowDay: currentDay
      })

   }

其中获取当月的天数只需在new Date() 依次填入年份，月份+1，0，然后使用getDate()的方法便可获取。
获取前面空几格，也就是当月1号是周几，依次填入年份，月份，1，然后使用getDay()的方法便可获取，结果是0就是周日，1就是周一，2–>周二依次类推。

wxml渲染

日历渲染，一个格子为一天。我们可以使用 grid 布局， grid-template-columns: repeat(7, 1fr);，将宽度等分成7份，也就是一行7个格子，为一周。
我们已经知道了当月的天数，又知道了该月1号是周几，所以一共循环 天数（monthNum) + 周几(week) 次就可以了。然后每个格子的值就是它们的 Index - week +1 。
然后，我们只保留值大于0的格子 。{{index-week+1 >0?index-week+1:''}}

<view class="calender  {{anmation? 'animation-slide-skew':''}}">
   <view wx:for='{{monthNum+week}}'  class="cal-body {{index-week+1==currentDay&&nowMonth==currentMonth&&nowYear==currentYear?'now':''}}" wx:key='index' data-day="{{index-week+1}}" bindtap="choseDay">
      <view class="{{index-week+1>0?'cal-text ':''}} {{choseDay==index-week+1&¤tMonth==choseMonth?'chose':''}}" >{{index-week+1 >0?index-week+1:''}}view>
   view>
view>

此时，我们当月的信息就出来了。

---

只有当月肯定是不够的，我们通过点击 < > 进行翻月，翻页。
当我们点击上一月的时候，当前选择的月份（currentMonth) -1;
点击下一月的时候，当前选择的月份(currrentMonth) +1 。
月份小于1的时候，再点击上一月，当前年份(currentYear) -1 ,月份成为11-1；
同理，加的时候大于11，年份+1，月份变成 0+1。
翻页代码实现如下：

  lastMonth() {
      this.setData({
         anmation:true
      })
      //计算余数，除以12之后的余数便是要减的月份数
      let Remainder = this.data.currentMonth % 12;
      if (this.data.currentMonth < 1) {
      //parseInt(this.data.currentMonth / 12) 计算整数，得到的值就是要减的年
          //如果当前选择的月份是负数，需要减整数后再-1
         var currentYear = this.data.currentYear - 1 - parseInt(this.data.currentMonth / 12)
         var currentMonth = 12 - Math.abs(Remainder) - 1
      } else {
         var currentYear = this.data.currentYear + parseInt(this.data.currentMonth / 12)
         var currentMonth = Remainder - 1
      }
      let monthInt = parseInt(this.data.currentMonth / 12)

      // let currentDay = this.data.currentDay;
      let monthNum = new Date(currentYear, currentMonth + 1, 0).getDate()
      let week = new Date(currentYear, currentMonth, 1).getDay()
      this.setData({
         currentYear: currentYear,
         currentMonth: currentMonth,
         monthNum: monthNum,
         week: week
      })
   
      console.log(currentYear, currentMonth, week, monthNum)
   },
   nextMonth() {
      this.setData({
         anmation:true
      })
      let Remainder = (this.data.currentMonth + 1) % 12;
      if (Remainder < 0) {
         var currentYear = this.data.currentYear - 1 - parseInt(Remainder / 12)
         var currentMonth = 12 - Math.abs(Remainder)
      } else {
        //  console.log(Remainder)
         var currentYear = Remainder == 0 ? this.data.currentYear + 1 : this.data.currentYear + parseInt(Remainder / 12)
         var currentMonth = Remainder
      }
      let monthInt = parseInt(this.data.currentMonth / 12)

      // let currentDay = this.data.currentDay;
      let monthNum = new Date(currentYear, currentMonth + 1, 0).getDate()
      let week = new Date(currentYear, currentMonth, 1).getDay()
      this.setData({
         currentYear: currentYear,
         currentMonth: currentMonth,

         monthNum: monthNum,
         week: week
      
      })

      console.log(currentYear, currentMonth, week, monthNum)
   }

大致原理就是这样，完整代码在GitHub：Jarry007

要是对您有帮助，请去github上点个star,谢谢