微信小程序原生实现好看的日期选择插件-万年历

今天看见一张比较好看的万年历图，刚好自己也在开发微信小程序，原本想开发成微信小程序组件上传的，结果发现好像行不通，应该是不允许上传组件一类的，反正代码是写出来了。
效果图如下：

左右按钮和左滑右滑可以切换年份。大概代码在下面，复制粘贴到指定文件就行
.wxml 文件如下

<view class="full-screen-date-choose" bindtouchstart='touchstart' bindtouchmove='touchmove' bindtouchend='touchend'>
  <image src="./images/bg.jpg"></image>
  <view class="left" bindtap="lastYear">
    <text class="left-arrow"></text>
  </view>
  <view class="right" bindtap="nextYear">
    <text class="right-arrow"></text>
  </view>
  <view class="week">
    <text>日</text>
    <text>一</text>
    <text>二</text>
    <text>三</text>
    <text>四</text>
    <text>五</text>
    <text>六</text>
  </view>
  <view class="clearView"></view>
  <view class="date" wx:for="{{date}}" wx:for-item="month">
    <view class="date-title">{{month.year}}年{{month.month}}月</view>
    <view class="month">
      <view class="week" wx:for="{{month.date}}" wx:for-item="week">
        <text class="day {{activeDate == (month.year+'-'+month.month+'-'+day)?'active':''}}" bindtap="chooseDate"
          data-value="{{month.year}}-{{month.month}}-{{day}}" wx:for="{{week}}" wx:for-item="day">{{day}}</text>
      </view>
    </view>
  </view>
</view>

.wxss 样式文件如下

.full-screen-date-choose {
  font-size: 14px;
}

.clearView {
  height: 40px;
  margin-top: 3%;
}

/* 背景图 */
.full-screen-date-choose image {
  width: 100vw;
  height: 100vh;
  position: fixed;
  z-index: -1;
  top: 0;
}

/* 顶部周一至周末 */
.full-screen-date-choose>.week {
  width: 95%;
  height: 40px;
  line-height: 40px;
  background-color: #EBF5FF;
  border-radius: 3px;
  color: #9CA6B2;
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
  position: fixed;
  left: 2.5%;
  top: 2.5%;
  zoom: 1
}

/* 日期选择 */
.full-screen-date-choose .date {
  width: 95%;
  margin: 25px auto;
}

/* 日期选择顶部年月标题 */
.full-screen-date-choose .date .date-title {
  text-align: center;
  font-family: "黑体";
  font-weight: bold;
  font-size: 14px;
  margin-bottom: 20px;
}

.full-screen-date-choose .date .date-title::before {
  content: "";
  display: inline-block;
  width: 70px;
  border: 1px solid #9BB6D2;
  margin-right: 10px;
  vertical-align: middle;
}

.full-screen-date-choose .date .date-title::after {
  content: "";
  display: inline-block;
  width: 70px;
  border: 1px solid #9BB6D2;
  margin-left: 10px;
  vertical-align: middle;
}

.full-screen-date-choose .date .month .week {
  font-family: '微软雅黑';
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
}

.week text {
  display: inline-block;
  height: 40px;
  line-height: 40px;
  text-align: center;
  width: 40px;
}

.week text.active {
  background-color: rgba(0, 0, 0, .5);
  border-radius: 50%;
  color: #fff;
}

/* 左右箭头 */
.full-screen-date-choose .left {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #fff;
  text-align: center;
  line-height: 40px;
  position: fixed;
  top: 50%;
  margin-top: -15px;
  left: 15px;
}

.full-screen-date-choose .left-arrow {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-top: 2px solid #999;
  border-right: 2px solid #999;
  transform: rotate(225deg);
}

.full-screen-date-choose .right {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #fff;
  text-align: center;
  line-height: 40px;
  position: fixed;
  top: 50%;
  margin-top: -15px;
  right: 15px;
}

.full-screen-date-choose .right-arrow {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-top: 2px solid #999;
  border-right: 2px solid #999;
  transform: rotate(45deg);
}

js文件如下

// plugin/pages/hello-page.js
//触屏开始点坐标
var startDot = {
  X: 0,
  Y: 0
};
//触屏到点坐标
var touchDot = {
  X: 0,
  Y: 0
};
var time = 0; //触屏时间
var number; //定时器ID
Page({
  data: {
    date: [],
    year: 0,
    activeDate: ""
  },
  onLoad() {
    let date = new Date();
    let year = date.getFullYear();
    this.setData({
      year
    })
    this.calculateValues(year);
  },
  //判断每个月1号是周几
  dayStart(year, month) {
    let tmpDate = new Date(year, month - 1, 1);
    return tmpDate.getDay();
  },
  //判断每个月有多少天
  getDate(year, month) {
    let tmpDate = new Date(year, month, 0);
    return tmpDate.getDate();
  },
  //计算数据
  calculateValues(year) {
  //偶尔因为设备性能问题卡一下，我这里用这个提示一下，意思意思
    wx.showToast({
      title: '数据渲染中...',
      icon: "loading",
      duration: 2000
    })
    for (let i = 1; i <= 12; i++) {
      let days = this.getDate(year, i);
      let startDay = this.dayStart(year, i);
      this.insertValues(year, i, days, startDay);
    }
  },
  //填入数据
  insertValues(year, month, days, startDay) {
    let date = this.formatDateList(days, startDay);
    let arr = this.data.date;
    arr.push({
      year,
      month,
      date
    });
    this.setData({
      date: arr
    })
  },
  //日期列表格式化
  formatDateList(days, startDay) {
    startDay -= 1;
    let num = 1;
    let allDay = Math.ceil((days + startDay) / 7) * 7;
    let arr = [],
      ARRAY = [];
    for (let i = 0; i < allDay; i++) {
      if (i < startDay || num > days) {
        arr.push("");
      } else {
        arr.push(num);
        num++;
      }
    }
    for (let i = 0; i < Math.ceil((days + startDay) / 7); i++) {
      ARRAY[i] = arr.slice(i * 7, (i + 1) * 7)
    }
    return ARRAY;
  },
  //选择日期
  chooseDate(event) {
    let value = event.currentTarget.dataset.value;
    let arr = value.split("-");
    if (arr[2]) {
      this.setData({
        activeDate: value
      })
      wx.showToast({
        title: value,
        icon: 'none',
        duration: 1000
      })
    }
  },
  /**
   * 触屏开始计时和获取坐标
   */
  touchstart: function (event) {
    startDot.X = event.touches[0].pageX;
    startDot.Y = event.touches[0].pageY;
    number = setInterval(function () {
      time++;
    }, 100);
  },
  /**
   * 判断滑动距离和时间是否需要切换页面
   */
  touchmove: function (event) {
    touchDot.X = event.touches[0].pageX;
    touchDot.Y = event.touches[0].pageY;
    //向左滑处理
    if ((startDot.X - touchDot.X) > 200 && (startDot.Y - touchDot.Y) < 150 && time > 0) {
      this.nextYear();
      clearInterval(number);
      time = 0;
    }
    //向右滑处理
    if ((touchDot.X - startDot.X) > 200 && (touchDot.Y - startDot.Y) < 150 && time > 0) {
      this.lastYear();
      clearInterval(number);
      time = 0;
    }
  },
  /**
   * 结束触屏重置计时
   */
  touchend: function (event) {
    clearInterval(number);
    time = 0;
  },
  // 下一年
  nextYear: function () {
    let year = this.data.year;
    year++;
    this.setData({
      year,
      date: []
    })
    this.calculateValues(year);
  },
  // 上一年
  lastYear: function () {
    let year = this.data.year;
    year--;
    this.setData({
      year,
      date: []
    })
    this.calculateValues(year);
  }
})