微信小程序日历弹框组件

参考文章：https://blogai.cn/posts/46

calendar.json

{
  "usingComponents": {},
  "disableScroll": true
}

calendar.wxml

<view class="titleDate">
  <button class="cu-btn" bindtap="lastMonth">
    <text class="cuIcon-back">＜</text>
  </button>
  {{currentYear}} - {{currentMonth+1}}
  <button class="cu-btn" bindtap="nextMonth">
    <text class="cuIcon-right">＞</text>
  </button>
</view>

<view class="title">
  <view wx:for='{{weeks}}' wx:key='index'>{{item}}</view>
</view>
<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&&currentMonth==choseMonth?'chose':''}}">{{index-week+1 >0?index-week+1:''}}</view>
  </view>
</view>
<view>
</view>
<picker-view wx:if='{{datePick}}' class="picker" mask-class='mask' indicator-class='indicator' bindchange="bindChange">
  <picker-view-column class='column'>
    <view wx:for='{{24}}' style="line-height:50rpx;" wx:key='index'>{{index
      <10? '0'+index:index}}</view>
  </picker-view-column>
  <picker-view-column class='column'>
    <view wx:for='{{60}}' style="line-height:50rpx;" wx:key='imdex'>{{index
      <10? '0'+index:index}}</view>
  </picker-view-column>
</picker-view>

<view>您选择的是：{{choseDate}} {{choseHours}} : {{choseMin}}</view>

<view>
  <view class="toToday" bindtap="initDay">今</view>
</view>

calendar.wxss

/* pages/sigle/calendar/calendar.wxss */

page {
  background: #fff;
}

.datePick {
  margin-top: 20rpx;
}

.indicator {
  height: 50rpx;
  width: 80%;
  margin-left: 10%;
  border-radius: 10rpx;
}

.column {
  text-align: center;
  color: cornflowerblue;
  font-weight: bold;
  font-size: 34rpx;
}

.picker {
  height: 150rpx;
  width: 80%;
  margin: 0 auto;
}

.text {
  width: 150px;
  height: 60px;
  margin-left: 20px;
}

.move {
  width: 100px;
  height: 60px;
  position: absolute;
  right: 0;
  transform: translateX(100px);
  background: rgb(245, 51, 93);
}

.calender {
  margin: 0 auto;
  width: 90%;
  height: 600rpx;
  color: rgb(68, 68, 68);
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-column-gap: 20rpx;
  transition: height 1s;
}

.titleDate {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 32rpx;
  font-weight: bold;
}

.cu-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 60rpx !important;
}

.title {
  border-bottom: 4rpx solid cornflowerblue;
  font-size: 30rpx;
  font-weight: bold;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  margin: 0 auto;
  width: 90%;
  color: rgb(93, 98, 136);
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-column-gap: 20rpx;
}

.cal-body {
  width: 80rpx;
  margin-top: 20rpx;
  font-size: 30rpx;
  font-weight: bold;
  height: 80rpx;
  text-align: center;
}

.cal-body .cal-text {
  line-height: 80rpx;
  border-bottom: 1rpx dashed rgba(100, 148, 237, 0.747);
}

.now {
  background: cornflowerblue;
  color: #fff;
  font-size: 32rpx;
  font-weight: bold;
  border-radius: 50%;
  box-shadow: 2rpx 2rpx 12rpx cornflowerblue;
}

.chose {
  background: rgb(20, 20, 20);
  color: #fff;
  font-size: 32rpx;
  font-weight: bold;
  border-radius: 14rpx;
  box-shadow: 2rpx 2rpx 12rpx rgb(122, 122, 122);
}

.toToday {
  text-align: center;
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  line-height: 100rpx;
  position: absolute;
  bottom: 30rpx;
  font-weight: bold;
  right: 30rpx;
  color: #fff;
  background: cornflowerblue;
  box-shadow: 2rpx 2rpx 20rpx rgba(123, 154, 211, 0.808);
}

calendar.js

const weeks = ['日', '一', '二', '三', '四', '五', '六']

function getWeelDay(year, month, day) {
  return new Date(year)
}
Page({

  /**
   * 页面的初始数据
   */
  data: {
    weeks: ['日', '一', '二', '三', '四', '五', '六'],
    datePick: false
  },
  start_(e) {
    this.setData({
      Start: e.touches[0].pageX,
      animation: false
    })
    console.log('start', this.data.Start)
  },
  move_(e) {
    let x = e.touches[0].pageX - this.data.Start
    if (x > -100 && x < 0) {
      this.setData({
        movex: x
      })
    }

    this.setData({
      show: e.touches[0].pageX - this.data.Start > 0 ? 'hide' : 'show'
    })
    console.log('move', x)
  },
  end_(e) {
    if (this.data.show == 'show') {
      this.setData({
        movex: -100,
        animation: true
      })
    } else {
      this.setData({
        movex: 0,
        animation: true
      })
    }
    // this.setData({
    //    ListTouchDirection: null
    // })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    // let date = new Date()
    // let currentYear = date.getFullYear(),
    // currentMonth = date.getMonth(),
    // currentDay = date.getDate()

    // let monthNum = new Date(currentYear,currentMonth+1,0).getDate()
    // let week = new Date(currentYear, currentMonth, 1).getDay()
    // this.setData({
    //    currentYear:currentYear,
    //    currentMonth:currentMonth,
    //    currentDay:currentDay,
    //    monthNum: monthNum,
    //    week: week,
    //    nowYear: currentYear,
    //    nowMonth: currentMonth,
    //    nowDay: currentDay
    // })
    this.initDay()

  },
  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号是周几，注意此时month不加1
    let week = new Date(currentYear, currentMonth, 1).getDay()
    this.setData({
      currentYear: currentYear,
      currentMonth: currentMonth,
      currentDay: currentDay,
      monthNum: monthNum,
      week: week,
      nowYear: currentYear, //这里的now代表今天对应的日期，存在data中，点击回到今天时再从data中取出
      nowMonth: currentMonth,
      nowDay: currentDay
    })

  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function() {

  },
  bindChange(e) {
    console.log(e.detail.value[0], e.detail.value[1])
    this.setData({
      choseHours: e.detail.value[0],
      choseMin: e.detail.value[1]
    })
  },
  choseDay(e) {
    let index_ = e.currentTarget.dataset.day
    if (index_ > 0) {
      if (this.data.choseMonth == this.data.currentMonth && this.data.choseDay == index_) {
        this.setData({
          choseDay: '',
          choseYear: '',
          choseMonth: '',
          choseDay: '',
          datePick: false
        })
      } else {
        console.log(this.data.currentYear, this.data.currentMonth, index_)
        let choseDate = this.data.currentYear + '' + this.data.currentMonth + '' + index_
        this.setData({
          choseDate: choseDate,
          choseYear: this.data.currentYear,
          choseMonth: this.data.currentMonth,
          choseDay: index_,
          datePick: true
        })
      }

    }

  },
  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
    })
    setTimeout(() => {
      this.setData({
        anmation: false
      })
    }, 1000)
    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
    })
    setTimeout(() => {
      this.setData({
        anmation: false
      })
    }, 1000)
    console.log(currentYear, currentMonth, week, monthNum)
  }
})