微信小程序日历组件（包含遮罩层）

[minbaowang]

html结构

<!--隐藏区域  -->
<view class="commodity_screen" bindtap="hideModal" wx:if="{{showModalStatus}}"></view>
  <!--弹出框  -->
<view animation="{{animationData}}" class="commodity_attr_box" wx:if="{{showModalStatus}}">
<!-- 头部 -->
  <view class="box_header">
    <view class="desk_title">座位数量</view>
    <view class="desk_num">
      <view class="desk_num_plus" bindtap='plus_num'>+</view><view class="desk_number">{{startNum}}</view><view class="desk_num_sub" bindtap='sub_num'>-</view>
    </view>
  </view>
<!-- 日历 -->
<view class="desk_title_time">使用日期</view>
<view class="modal-dialog" hidden="{{showModalSecond}}">
  <view class='modalBox'>
    <view class='box'>
      <view class='calendarBox'>
        <view class='calendarTitle'>
          <!-- 修改插件的代码 -->
          <view class='lt-arrow' bindtap='lastMonth'>
          <image src='../../images/arrow_left.svg' mode='aspectFit'></image>
          </view>
          {{year}}年{{month}}月
          <view class='rt-arrow' bindtap='nextMonth'>
            <image src='../../images/arrow.svg' mode='aspectFit'></image>
          </view>
        </view>
        <block wx:for="{{week}}" wx:key="item">
          <view class="week">{{week[index]}}</view>
        </block>
        <block wx:for="{{weekNum}}" wx:key="item">
          <view class="week" style="border-bottom:0;color:transparent">0</view>
        </block>
        <block wx:for="{{dayList}}" wx:key="item">
          <view class='week' style="border-bottom:0;background-color:{{dayIndex>index?'#f1f1f1':(tapThis==index?'#1296db':'')}};color:{{tapThis==index?'white':''}}" catchtap="lightChoose" data-index="{{index}}" data-value="{{item}}">{{item}}</view>
        </block>
      </view>
    </view>
  </view>
</view>
<!-- 底部 -->
  <view class="box_bottom" catchtap="chooseDateSecond">确认预定</view>
</view>

css部分

/* 隐藏区域 */
.commodity_screen {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: #000;
  opacity: 0.2;
  overflow: hidden;
  z-index: 1000;
  color: #fff;
}
/*对话框 */
.commodity_attr_box {
  height: 800rpx;
  width: 100%;
  overflow: hidden;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 2000;
  background: #fff;
  padding-top: 20rpx;
}
.box_header{
  position:relative;
  margin-left:32rpx;
  margin-right:32rpx;
  height:100rpx;
  line-height:100rpx;
}
.desk_title{
  position: absolute;
  left:0;
}
.desk_num{
  position: absolute;
  right:0;
  width:20%;
  display:flex;
}
.desk_num_plus,.desk_num_sub,.desk_number{
  flex:1;
  display:flex;
  align-items: center;
  justify-content: center;
}
.box_bottom{
  position: fixed;
  bottom:0;
  width:100%;
  height: 100rpx;
  background: #681831;
  color:#fff;
  text-align: center;
  line-height: 100rpx;
}
/* 日历 */

/* 修改的样式 */
.lt-arrow,.rt-arrow{
    position: absolute;
    top: 1rpx;
    width: 60rpx;
    height: 60rpx;
}
.lt-arrow image,.rt-arrow image{
    width: 32rpx;
    height: 32rpx;
}
.lt-arrow{
    left: 110rpx;
}
.rt-arrow{
    right: 100rpx;
}

data数据部分

 data: {
    showModal: false,
    showModalSecond: false,
    weekLength: 7,
    week: ["日", "一", "二", "三", "四", "五", "六"],
    dayList: [],
    weekNum: 0,
    tapThis: 0,
    thisMonth: 0,
    thisYear: 0,
    dayIndex: 0,
    year: 0,
    month: 0,
    chooseDateFirst: "",
    chooseDateSecond: "",
    startNum:0
  },
  clickme: function () {
    this.showModal();
  }

js逻辑部分

//显示对话框
  showModal: function () {
    // 显示遮罩层
    var animation = wx.createAnimation({
      duration: 200,
      timingFunction: "linear",
      delay: 0
    })
    this.animation = animation
    animation.translateY(300).step()
    this.setData({
      animationData: animation.export(),
      showModalStatus: true
    })
    setTimeout(function () {
      animation.translateY(0).step()
      this.setData({
        animationData: animation.export()
      })
    }.bind(this), 200)
  },
  //隐藏对话框
  hideModal: function () {
    // 隐藏遮罩层
    var animation = wx.createAnimation({
      duration: 200,
      timingFunction: "linear",
      delay: 0
    })
    this.animation = animation
    animation.translateY(300).step()
    this.setData({
      animationData: animation.export(),
    })
    setTimeout(function () {
      animation.translateY(0).step()
      this.setData({
        animationData: animation.export(),
        showModalStatus: false
      })
    }.bind(this), 200)
  },
  // 日历
  getWeek(year, month, day) {
    var that = this;
    var d = new Date();
    d.setFullYear(year);
    d.setMonth(month - 1);
    d.setDate(1);
    var n = d.getDay();
    var arr = [];
    var Index = 0;
    var dayN = 1;
    for (var i = 0; i < day; i++) {
      arr.push(dayN++);
    }
    var now = new Date();
    var nowYear = now.getFullYear();
    var nowMonth = now.getMonth() + 1;
    var nowDay = now.getDate();
    var val = 1;
    if (year == nowYear) {
      if (month == nowMonth) {
        Index = arr.indexOf(nowDay);
        console.log(Index);
        val = nowDay;
      }
    }
    that.setData({
      weekNum: n,
      dayList: arr,
      dayIndex: Index,
      tapThis: Index,
      thisMonth: month,
      thisYear: year,
      chooseDate: year + "-" + month + "-" + val,
    })
  },
  chooseDateSecond(e) {
    var that = this;
    console.log(this.data.tapThis);
      that.setData({
        // 保存日期，并计算
        // 隐藏弹框

      })
      this.hideModal()
  },
  // 高亮选择的日期
  lightChoose(e){
    var that = this;
    var n = e.currentTarget.dataset.index;
    var val = e.currentTarget.dataset.value;
    this.setData({
      tapThis: n
    })
  },
  getDayNum(year, month) { //传入参数年份 和 要计算的月份， 可以为字符串，也可以为数字。
    var that = this;
    var d = new Date();
    d.setFullYear(year);
    d.setMonth(month);
    d.setDate(0);
    return d.getDate();
    // console.log(d.getDate()); //d.getDate() 即为此月的总天数！
  },
  // 上个月
  lastMonth: function () {
    //全部时间的月份都是按0~11基准，显示月份才+1
    let year = this.data.month - 2 < 0 ? this.data.year - 1 : this.data.year;
    let month = this.data.month - 2 < 0 ? 11 : this.data.month - 2;
    let days = this.getDayNum(year, month + 1)
    this.setData({
      year: year,
      month: (month + 1)
    })
    this.getWeek(year, month + 1, days)
  },
  // 下个月
  nextMonth: function () {
    //全部时间的月份都是按0~11基准，显示月份才+1
    let year = this.data.month > 11 ? this.data.year + 1 : this.data.year;
    let month = this.data.month > 11 ? 0 : this.data.month;
    console.log(month)
    let days = this.getDayNum(year, month + 1)
    this.setData({
      year: year,
      month: (month + 1)
    })
    this.getWeek(year, month + 1, days)
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    // 日历
    var that = this;
    var mydate = new Date();
    var year = mydate.getFullYear();
    var month = mydate.getMonth();
    var months = month + 1;
    this.data.year = year;
    this.data.month = months;
    this.data.day = mydate.getDate();
    this.data.days = that.getDayNum(this.data.year, this.data.month)
    that.getWeek(this.data.year, this.data.month, this.data.days); //使用方法： 在此函数内传入年、月、日(此月的天数)即可。
    this.setData({
      year: this.data.year,
      month: this.data.month,
      chooseDateFirst: this.data.year + "-" + this.data.month + "-" + this.data.day,
      chooseDateSecond: this.data.year + "-" + this.data.month + "-" + this.data.day
    })
  },
  // 座位数量增减
  plus_num(){
    let that=this.data
    let deskNum=that.startNum
    deskNum++
    this.setData({
      startNum:deskNum
    })
  },
  sub_num(){
    let that = this.data
    let deskSubNum = that.startNum
    deskSubNum--
    if (deskSubNum<=0){
      deskSubNum=0
      this.setData({
        startNum: deskSubNum
      })
    }else{
      this.setData({
        startNum: deskSubNum
      })
    }
  },

两个日期选择框的日历组件描述

html部分

<!-- 日历 -->
<view class="modal-mask" bindtap="hideModal" catchtouchmove="preventTouchMove" hidden="{{showModal}}"></view>
<view class="modal-dialog" hidden="{{showModal}}">
  <view class='modalBox'>
    <view class='box'>
      <view class='calendarBox'>
        <view class='calendarTitle'>
        <!-- 修改插件的代码 -->
          <view class='lt-arrow' bindtap='lastMonth'>
          <image src='../../images/arrow_left.svg' mode='aspectFit'></image>
        </view>
        {{year}}年{{month}}月
        <view class='rt-arrow' bindtap='nextMonth'>
          <image src='../../images/arrow.svg' mode='aspectFit'></image>
        </view>
      </view>

        <block wx:for="{{week}}" wx:key="item">
          <view class="week">{{week[index]}}</view>
        </block>
        <block wx:for="{{weekNum}}" wx:key="item">
          <view class="week" style="border-bottom:0;color:transparent">0</view>
        </block>
        <block wx:for="{{dayList}}" wx:key="item">
          <view class='week' style="border-bottom:0;background-color:{{dayIndex>index?'#f1f1f1':(tapThis==index?'#1296db':'')}};color:{{tapThis==index?'white':''}}" catchtap="chooseDate" data-index="{{index}}" data-value="{{item}}">{{item}}</view>
        </block>
      </view>
    </view>
  </view>
</view>

<!-- 第二份 -->
<view class="modal-mask" bindtap="hideModalSecond" catchtouchmove="preventTouchMove" hidden="{{showModalSecond}}"></view>
<view class="modal-dialog" hidden="{{showModalSecond}}">
  <view class='modalBox'>
    <view class='box'>
      <view class='calendarBox'>
        <view class='calendarTitle'>
          <!-- 修改插件的代码 -->
          <view class='lt-arrow' bindtap='lastMonth'>
          <image src='../../images/arrow_left.svg' mode='aspectFit'></image>
          </view>
          {{year}}年{{month}}月
          <view class='rt-arrow' bindtap='nextMonth'>
            <image src='../../images/arrow.svg' mode='aspectFit'></image>
          </view>
        </view>
        <block wx:for="{{week}}" wx:key="item">
          <view class="week">{{week[index]}}</view>
        </block>
        <block wx:for="{{weekNum}}" wx:key="item">
          <view class="week" style="border-bottom:0;color:transparent">0</view>
        </block>
        <block wx:for="{{dayList}}" wx:key="item">
          <view class='week' style="border-bottom:0;background-color:{{dayIndex>index?'#f1f1f1':(tapThis==index?'#1296db':'')}};color:{{tapThis==index?'white':''}}" catchtap="chooseDateSecond" data-index="{{index}}" data-value="{{item}}">{{item}}</view>
        </block>
      </view>
    </view>
  </view>
</view>

启动的html部分

<view class="weui-cells weui-cells_after-title ">
      <view class="weui-cell weui-cell_access" hover-class="weui-cell_active" catchtap='showModalBtn'>
        <view class="weui-cell__ft weui-cell__ft_in-access">{{chooseDateFirst}}</view>
      </view>
      <view class="hr">—</view>
      <view class="weui-cell weui-cell_access" hover-class="weui-cell_active" catchtap='showModalBtnSecond'>
        <view class="weui-cell__ft weui-cell__ft_in-access">{{chooseDateSecond}}</view>
      </view>
    </view>

css部分

.weui-cells{
  margin-left:20rpx;
  margin-bottom:30rpx;
  display:flex;
}
.weui-cell{
  flex:1;
}
.weui-cell__ft{
  border:1rpx solid #681831;
  border-radius: 16rpx;
  font-size:28rpx;
  background: #681831;
  padding:10rpx 40rpx;
  color:#fff;
  text-align: center;
}
.hr{
  width:100rpx;
  text-align: center;
}
.modalBox{
  width: 100%;
  font-size: 32rpx;
}
.box{
  margin: 0 auto;
  width: 630rpx;
}
.calendarTitle{
  /* margin: 0 auto;
  width: 630rpx; */
  width: 100%;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  border-bottom: 1rpx solid #ddd;
  position: relative;
}
.calendarBox{
  /* width: 630rpx; */
  width:100%;
  margin: 0 auto;
  border:1rpx solid #ddd;
}
.week{
  display: inline-block;
  width:90rpx;
  height: 80rpx;
  text-align: center;
  line-height: 80rpx;
  border-bottom: 1rpx solid #ddd;
}
.dateBtn{
  width:100%;
  height: 80rpx;
  display: flex;
  justify-content: space-between;
  margin-top: 20rpx;

}
 .dateBtn>button{
  width: 45%;
  height: 100%;
  display:flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  font-size: 36rpx;
} 
/* 模态框 */  

.modal-mask {  
  width: 100%;  
  height: 100%;  
  position: fixed;  
  top: 0;  
  left: 0;  
  background: #000;  
  opacity: 0.5;  
  overflow: hidden;  
  z-index: 9000;  
}  

.modal-dialog {  
  width: 85%;  
  padding: 100rpx 30rpx 30rpx 30rpx;  
  overflow: hidden;  
  position: fixed;  
  top: 20%;  
  left: 0;  
  right: 0;  
  margin: 0 auto;  
  z-index: 9999;  
  background: rgba(255, 255, 255, 1);  
  border-radius: 5rpx;  
}

/* 修改的样式 */
.lt-arrow,.rt-arrow{
    position: absolute;
    top: 1rpx;
    width: 60rpx;
    height: 60rpx;
}
.lt-arrow image,.rt-arrow image{
    width: 32rpx;
    height: 32rpx;
}
.lt-arrow{
    left: 110rpx;
}
.rt-arrow{
    right: 100rpx;
}

data部分

showModal: true,
    showModalSecond: true,
    weekLength: 7,
    week: ["日", "一", "二", "三", "四", "五", "六"],
    dayList: [],
    weekNum: 0,
    tapThis: 0,
    thisMonth: 0,
    thisYear: 0,
    dayIndex: 0,
    year:0,
    month:0,
    chooseDateFirst: "",
    chooseDateSecond: ""

js部分

getWeek(year, month, day) {
    var that = this;
    var d = new Date();
    d.setFullYear(year);
    d.setMonth(month - 1);
    d.setDate(1);
    var n = d.getDay();
    var arr = [];
    var Index = 0;
    var dayN = 1;
    for (var i = 0; i < day; i++) {
      arr.push(dayN++);
    }
    var now = new Date();
    var nowYear = now.getFullYear();
    var nowMonth = now.getMonth() + 1;
    var nowDay = now.getDate();
    var val = 1;
    if (year == nowYear) {
      if (month == nowMonth) {
        Index = arr.indexOf(nowDay);
        console.log(Index);
        val = nowDay;
      }
    }
    that.setData({
      weekNum: n,
      dayList: arr,
      dayIndex: Index,
      tapThis: Index,
      thisMonth: month,
      thisYear: year,
      chooseDate: year + "-" + month + "-" + val,
    })
  },
  chooseDate(e) {
    var that = this;
    var n = e.currentTarget.dataset.index;
    var val = e.currentTarget.dataset.value;
    console.log(n);
    if (n >= that.data.dayIndex) {
      that.setData({
        tapThis: n,
        chooseDateFirst: that.data.thisYear + "-" + that.data.thisMonth + "-" + val,
        showModal: true,
      })
    }
  },
  chooseDateSecond(e) {
    var that = this;
    var n = e.currentTarget.dataset.index;
    var val = e.currentTarget.dataset.value;
    console.log(n);
    if (n >= that.data.dayIndex) {
      that.setData({
        tapThis: n,
        chooseDateSecond: that.data.thisYear + "-" + that.data.thisMonth + "-" + val,
        showModalSecond: true,
      })
    }
  },
  /** 
  * 弹出框蒙层截断touchmove事件 
  */
  preventTouchMove: function () {
  },
  /** 
   * 隐藏模态对话框 
   */
  hideModal() {
    var that = this;
    that.setData({
      showModal: true
    })
  },
  hideModalSecond() {
    var that = this;
    that.setData({
      showModalSecond: true
    })
  },
  showModalBtn() {
    var that = this;
    that.setData({
      showModal: false
    })
  },
  showModalBtnSecond() {
    var that = this;
    that.setData({
      showModalSecond: false
    })
  },
  getDayNum(year, month) { //传入参数年份 和 要计算的月份， 可以为字符串，也可以为数字。
    var that = this;
    var d = new Date();
    d.setFullYear(year);
    d.setMonth(month);
    d.setDate(0);
    return d.getDate();
    // console.log(d.getDate()); //d.getDate() 即为此月的总天数！
  },
  // 上个月
  lastMonth: function () {
    //全部时间的月份都是按0~11基准，显示月份才+1
    let year = this.data.month - 2 < 0 ? this.data.year - 1 : this.data.year;
    let month = this.data.month - 2 < 0 ? 11 : this.data.month - 2;
    let days = this.getDayNum(year, month+1)
    this.setData({
      year: year,
      month: (month + 1)
    })
    this.getWeek(year, month+1, days)
  },
  // 下个月
  nextMonth: function () {
    //全部时间的月份都是按0~11基准，显示月份才+1
    let year = this.data.month > 11 ? this.data.year + 1 : this.data.year;
    let month = this.data.month > 11 ? 0 : this.data.month;
    console.log(month)
    let days = this.getDayNum(year, month+1)
    this.setData({
      year: year,
      month: (month+1)
    })
    this.getWeek(year, month+1, days)
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    //获取当前年月日
    var that = this;
    var mydate = new Date();
    var year = mydate.getFullYear();
    var month = mydate.getMonth();
    var months = month + 1;
    this.data.year = year;
    this.data.month = months;
    this.data.day = mydate.getDate();
    this.data.days=that.getDayNum(this.data.year, this.data.month)
    that.getWeek(this.data.year, this.data.month, this.data.days); //使用方法： 在此函数内传入年、月、日(此月的天数)即可。
    this.setData({
      year: this.data.year,
      month: this.data.month,
      chooseDateFirst: this.data.year + "-" + this.data.month + "-" + this.data.day,
      chooseDateSecond: this.data.year + "-" + this.data.month + "-" + this.data.day
    })

  },