预约型日历,当前时间之前的不允许点击

wxml中代码:
<view class="gradient">
  <view class="box">
    <view class="spaceAroundCenter">
      <view class="flex-item">
        <view class="item-content">
          <view class="glyphicon noneMeet"  wx:if="{{currentYue==selectYue}}">《</view>
          <view bindtap="doDay" data-key='left' class="glyphicon glyphicon-triangle-left"  wx:else>《</view>
        </view>
      </view>
      <view class="flex-item item-content-current-day">
        <view class="item-content">{{currentDate}}</view>
      </view>
      <view class="flex-item">
        <view class="item-content" bindtap="doDay" data-key="right">
          <view class="glyphicon glyphicon-triangle-right">》</view>
        </view>
      </view>
    </view>

    <view class="spaceAroundCenter">
      <view>一</view>
      <view>二</view>
      <view>三</view>
      <view>四</view>
      <view>五</view>
      <view>六</view>
      <view>日</view>
    </view>

    <view class="spaceAroundCenter">
      <view class="flex-item" wx:for="{{currentDayList}}" wx:for-index='key' wx:for-item="vo" wx:key="{{key}}">
        <view id='{{key}}'  data-val='{{vo}}' class="item-content bk-color-day" wx:if="{{vo == currentDay}}">{{vo}}</view>
        <view id='{{key}}' data-val='{{vo}}' class="item-content bk-color-dayClick" wx:elif="{{key == currentClickKey && currentClickKey != '' && vo != ''}}">{{vo}}</view>
      <view id='{{key}}' class="item-content noneMeet" wx:elif="{{ vo< currentDay&& vo != ''&&currentYue==selectYue}}">{{vo}}</view>
        <view id='{{key}}'  data-val='{{vo}}' class="item-content" bindtap='onClickItem' wx:else>{{vo}}</view>
      </view>
    </view>
  </view>
</view>
js中代码:
Page({
  data: {
    currentDate: "", //当前年月
    dayList: '',//当前年月
    currentDayList: '',
    currentObj: '', //当前年月日
    currentDay: '',//当前日
    currentClickKey: '',
  },
  onLoad: function(options) {
    var currentObj = this.getCurrentDayString()
    this.setData({
      currentDate: currentObj.getFullYear() + '年' + (currentObj.getMonth() + 1) + '月',
      currentDay: currentObj.getDate(),
      
      currentYue: currentObj.getMonth() + 1,
      selectYue: currentObj.getMonth() + 1,

      currentObj: currentObj
    })
    this.setSchedule(currentObj)
    console.log("currentYue");
    console.log(currentObj.getMonth() + 1);
  },

  doDay: function(e) {      //前一个月后一个月
    var that = this
    var currentObj = that.data.currentObj
    var Y = currentObj.getFullYear();
    var m = currentObj.getMonth() + 1;
    var d = currentObj.getDate();
    var str = ''
    if (e.currentTarget.dataset.key == 'left') {
      m -= 1
      if (m <= 0) {
        str = (Y - 1) + '/' + 12 + '/' + d
      } else {
        str = Y + '/' + m + '/' + d
      }
    } else {
      m += 1
      if (m <= 12) {
        str = Y + '/' + m + '/' + d
      } else {
        str = (Y + 1) + '/' + 1 + '/' + d
      }
    }
    currentObj = new Date(str)
    this.setData({
      currentDate: currentObj.getFullYear() + '年' + (currentObj.getMonth() + 1) + '月',
      currentObj: currentObj,
      selectYue: currentObj.getMonth() + 1
    })
    this.setSchedule(currentObj);
    console.log("selectYue");
    console.log(currentObj.getMonth() + 1);
  },
  getCurrentDayString: function() {   //获取当前年月日
    var objDate = this.data.currentObj
    if (objDate != '') {
      return objDate
    } else {
      var c_obj = new Date()
      var a = c_obj.getFullYear() + '/' + (c_obj.getMonth() + 1) + '/' + c_obj.getDate()
      return new Date(a)
    }
  },
  setSchedule: function(currentObj) {
    var that = this
    var m = currentObj.getMonth() + 1
    var Y = currentObj.getFullYear()
    var d = currentObj.getDate();
    var dayString = Y + '/' + m + '/' + currentObj.getDate()
    var currentDayNum = new Date(Y, m, 0).getDate() //本月天数
    var currentDayWeek = currentObj.getUTCDay() + 1 //返回星期几
    var result = currentDayWeek - (d % 7 - 1);
    var firstKey = result <= 0 ? 7 + result : result;
    var currentDayList = []
    var f = 0
    for (var i = 0; i < 42; i++) {
      let data = []
      if (i < firstKey - 1) {
        currentDayList[i] = ''
      } else {
        if (f < currentDayNum) {
          currentDayList[i] = f + 1
          f = currentDayList[i]
        } else if (f >= currentDayNum) {
          currentDayList[i] = ''
        }
      }
    }
    that.setData({
      currentDayList: currentDayList,
      dayString                        //当前日期2019/5/22
    })
    console.log("dayString");
    console.log(dayString);
    console.log("currentDayList");
    console.log(currentDayList);
  },

  // 设置点击事件
  onClickItem: function(e) {
    console.log(JSON.stringify((e)));
    console.log(e);
    console.log(JSON.stringify((e.currentTarget)));
    this.setData({
      currentClickKey: e.currentTarget.id
    });
  }
})
wxss代码:
.spaceAroundCenter {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: space-around;
}

.box {
  margin: 30rpx;
}
 
.flex-item {
  /* flex-flow: nowrap;
  flex-grow: 1;
  flex-shrink: 1; */
  width: 14.2%;
}
 
.item-content {
  padding: 25rpx 0;
  text-align: center;
}
 /* 当前日期 */
.bk-color-day {
  color: #fff;
  border-radius: 50%;
  background-color: #ed7e2d;
}

/* 当前选中日期 */
.bk-color-dayClick {
  color: #fff;
  border-radius: 50%;
  background-color: #3c8ce7;
}
 
.item-content-current-day {
  flex-grow: 2;
}
.noneMeet{color: #ccc;
 }

改自:https://timor419.github.io/2018/10/28/WX-calendar/

  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值