微信小程序可多选日历，JS动态构建近2个月日历数组，过往日期不可选

于 2018-12-24 14:57:04 发布
阅读量2.4k 收藏 7
点赞数 1
分类专栏： 微信小程序 文章标签： 微信小程序 日历 近2个月日历
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fqhbj/article/details/85233502
版权

自己的项目中有个需求，用户可选择近两个月内的日期，页面是我自己设计的，喜欢的可以拿去；
我是做PHP的，前端会一点，JS比较差，已转产品几年了，很久没有码代码了，加上刚刚接触小程序，做起来稍微费了点劲。
不过综合了网上的一些文章，也算是写出来了，虽然不是很好，但是够用，分享给大家。

微信小程序里面没有DOM对象, 不能操作DOM，只有通过操作数据来实现，先给大家看看效果：

微信小程序可多选日历

实现思路：判断被点击text的state值，点击前为false，则给该text增加selected样式，反之则取消样式。

实现代码：

.wxml文件：

<!--pages/calendar/index.wxml-->
<view class='tips'>日期可多选，不超过一个月</view>
<scroll-view scroll-y class='scroll-view'>
  <view class='calendar'>
    <view class='year_month'>
      <text class='year'>{{thisYear}}年</text>
      <text class='month'>{{thisMonth}}月</text>
    </view>
    <view class='week'>
      <text class='saturday'>周日</text>
      <text>周一</text>
      <text>周二</text>
      <text>周三</text>
      <text>周四</text>
      <text>周五</text>
      <text class='sunday'>周六</text>
    </view>
    <block wx:for="{{thisMonthArr}}" wx:key="index">
    <view class='week'>
        <text class="saturday {{item[0]['isToday'] == true ? 'now' : ''}} {{item[0]['date'] < today ? 'disabled' : ''}} {{item[0]['state']==true?'selected':''}}" data-month='thisMonth' data-date="{{item[0]['date'] < today ? '' :item[0]['date']}}" data-key='{{index}}' data-keyitem='0' bindtap="select_date">{{item[0]['date']}}</text>
        <text class="{{item[1]['isToday'] == true ? 'now' : ''}} {{item[1]['date'] < today ? 'disabled' : ''}} {{item[1]['state']==true?'selected':''}}" data-month='thisMonth' data-date="{{item[1]['date'] < today ? '' :item[0]['date']}}" data-key='{{index}}' data-keyitem='1' bindtap="select_date">{{item[1]['date']}}</text>
        <text class="{{item[2]['isToday'] == true ? 'now' : ''}} {{item[2]['date'] < today ? 'disabled' : ''}} {{item[2]['state']==true?'selected':''}}" data-month='thisMonth' data-date="{{item[2]['date'] < today ? '' :item[0]['date']}}" data-key='{{index}}' data-keyitem='2' bindtap="select_date">{{item[2]['date']}}</text>
        <text class="{{item[3]['isToday'] == true ? 'now' : ''}} {{item[3]['date'] < today ? 'disabled' : ''}} {{item[3]['state']==true?'selected':''}}" data-month='thisMonth' data-date="{{item[3]['date'] < today ? '' :item[0]['date']}}" data-key='{{index}}' data-keyitem='3' bindtap="select_date">{{item[3]['date']}}</text>
        <text class="{{item[4]['isToday'] == true ? 'now' : ''}} {{item[4]['date'] < today ? 'disabled' : ''}} {{item[4]['state']==true?'selected':''}}" data-month='thisMonth' data-date="{{item[4]['date'] < today ? '' :item[0]['date']}}" data-key='{{index}}' data-keyitem='4' bindtap="select_date">{{item[4]['date']}}</text>
        <text class="{{item[5]['isToday'] == true ? 'now' : ''}} {{item[5]['date'] < today ? 'disabled' : ''}} {{item[5]['state']==true?'selected':''}}" data-month='thisMonth' data-date="{{item[5]['date'] < today ? '' :item[0]['date']}}" data-key='{{index}}' data-keyitem='5' bindtap="select_date">{{item[5]['date']}}</text>
        <text class="sunday {{item[6]['isToday'] == true ? 'now' : ''}} {{item[6]['date'] < today ? 'disabled' : ''}} {{item[6]['state']==true?'selected':''}}" data-month='thisMonth' data-date="{{item[6]['date'] < today ? '' :item[0]['date']}}" data-key='{{index}}' data-keyitem='6' bindtap="select_date">{{item[6]['date']}}</text> 
    </view>
    </block>
  </view>

  <view class='calendar'>
    <view class='year_month'>
      <text class='year'>{{nextYear}}年</text>
      <text class='month'>{{nextMonth}}月</text>
    </view>
    <view class='week'>
      <text class='saturday'>周日</text>
      <text>周一</text>
      <text>周二</text>
      <text>周三</text>
      <text>周四</text>
      <text>周五</text>
      <text class='sunday'>周六</text>
    </view>
    <block wx:for="{{nextMonthArr}}" wx:key="index">
    <view class='week'>
        <text class="saturday {{item[0]['state']==true?'selected':''}}" data-date="{{item[0]['date']}}" data-key='{{index}}' data-keyitem='0' bindtap="select_date">{{item[0]['date']}}</text>
        <text class="{{item[1]['state']==true?'selected':''}}" data-date="{{item[1]['date']}}" data-key='{{index}}' data-keyitem='1' bindtap="select_date">{{item[1]['date']}}</text>
        <text class="{{item[2]['state']==true?'selected':''}}" data-date="{{item[2]['date']}}" data-key='{{index}}' data-keyitem='2' bindtap="select_date">{{item[2]['date']}}</text>
        <text class="{{item[3]['state']==true?'selected':''}}" data-date="{{item[3]['date']}}" data-key='{{index}}' data-keyitem='3' bindtap="select_date">{{item[3]['date']}}</text>
        <text class="{{item[4]['state']==true?'selected':''}}" data-date="{{item[4]['date']}}" data-key='{{index}}' data-keyitem='4' bindtap="select_date">{{item[4]['date']}}</text>
        <text class="{{item[5]['state']==true?'selected':''}}" data-date="{{item[5]['date']}}" data-key='{{index}}' data-keyitem='5' bindtap="select_date">{{item[5]['date']}}</text>
        <text class="sunday {{item[6]['state']==true?'selected':''}}" data-date="{{item[6]['date']}}" data-key='{{index}}' data-keyitem='6' bindtap="select_date">{{item[6]['date']}}</text> 
    </view>
    </block>
  </view>

</scroll-view>

.js文件

// pages/calendar/index.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    thisYear: '',
    thisMonth: '',
    thisMonthArr: [],
    today: new Date().getDate(),
    nextYear: '',
    nextMonth: '',
    nextMonthArr: []
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    //初始化日历数据
    var nextM_start = new Date(new Date(new Date().toLocaleDateString()).setMonth(new Date().getMonth() + 1)); //下一个月
    var thisMonthArr = this.getDateArr(new Date());
    var nextMonthArr = this.getDateArr(nextM_start);
    this.setData({
      thisYear: new Date().getFullYear(),
      thisMonth: new Date().getMonth() + 1,
      nextYear: nextM_start.getFullYear(),
      nextMonth: nextM_start.getMonth() + 1,
      thisMonthArr: thisMonthArr,
      nextMonthArr: nextMonthArr
    })
  },

  select_date: function(e) {
    //如果点击项为空百项目，不继续执行
    var date = e.currentTarget.dataset.date;
    if (date == '' || date <= 0) {
      return;
    }
    var index = e.currentTarget.dataset.key;
    var item = e.currentTarget.dataset.keyitem;
    var month = e.currentTarget.dataset.month;
    if (month == 'thisMonth' ){
      var that = this.data.thisMonthArr;
    }else{
      var that = this.data.nextMonthArr;
    }
    //切换选中状态
    if (that[index][item].state == true) {
      that[index][item].state = false;
    } else if (that[index][item].state == false) {
      that[index][item].state = true;
    }
    //console.log(that);
    //根据月份设置数据
    if (month == 'thisMonth') {
      this.setData({
        thisMonthArr: that,
      });
    } else {
      this.setData({
        nextMonthArr: that,
      });
    }
  },

  //根据指定年月获得当月天数
  mGetDate(year, month) {
    var d = new Date(year, month, 0);
    return d.getDate();
  },
  //根据指定年月获得当月日历数组
  getDateArr(date) {
    //根据指定年月
    //var myDate = new Date();
    var myDate = date;
    var thisYear = myDate.getFullYear(); //获取完整的年份
    var thisMonth = myDate.getMonth() + 1; //获取当前月份(0-11,0代表1月)
    var firstDay = new Date(thisYear + ',' + thisMonth + ',01').getDay(); //本月第一天星期几,0表示星期天
    var nowDay = myDate.getDate(); // 今天是几号
    var monthNum = this.mGetDate(thisYear, thisMonth); //本月多少天

    var monthArray = [];
    var week = 1; //第一周
    var oneDay = '';
    var isToday = false;
    monthArray[week] = new Array(); //声明本周的二维数组

    //循环当月的每一天
    for (var k = 1; k <= monthNum; k++) {
      isToday = false;
      //组装当前日期
      oneDay = thisYear + ',' + thisMonth + ',' + k;
      var witchDay = new Date(oneDay).getDay(); //当前是星期几
      //如果当期循环日期为今天
      if (k == nowDay) {
        isToday = true;
      }
      //如果是第一周
      if (week == 1) {
        //判断当前日期是否是本月第一天
        if (k == 1) {
          //第一天之前的日期补为空
          for (var a = 0; a < firstDay; a++) {
            monthArray[week][a] = {
              date: '',
              isToday: isToday,
              state: false
            };
          }
        }
      }
      monthArray[week][witchDay] = {
        date: k,
        isToday: isToday,
        state: false
      };

      //如果已经是周六，切换到下一周
      if (witchDay == 6) {
        week++;
        monthArray[week] = new Array(); //声明本周的二维数组
      }
    }
    monthArray.splice(0, 1); //删除下标为0的空元素
    //console.log(monthArray);
    return monthArray;
  },
})

.wxss文件

/* pages/calendar/index.wxss */

.tips {
  width: 100%;
  height: 80rpx;
  line-height: 80rpx;
  background: #E6F2FF;
  text-align: center;
  font-size: 28rpx;
  color: #888888;
}
.calendar {
  width: 100%;
  height: auto;
  overflow: hidden;
}
.calendar .year_month{
  width: 100%;
  height: 120rpx;
  line-height: 120rpx;
  text-align: right;
  border-bottom: #E6E6E6 1px solid;
}
.calendar .year_month .year{
  font-size: 28rpx;
  padding-right: 20rpx;
}
.calendar .year_month .month{
  font-size: 80rpx;
  padding-right: 20rpx;
}
.calendar .week {
  width: 98%;
  margin: 0 auto;
  height: auto;
  overflow: hidden;
}
.calendar .week text{
  width: 14%;
  margin: 0 auto;
  text-align: center;
  height: 120rpx;
  font-size: 36rpx;
  display: flex;
  float: left;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-bottom: #FFFFFF 1px solid;
}
.calendar .week .saturday {
  color: #E64340;
}
.calendar .week .sunday {
  color: #10AEFF;
}
.calendar .week .now {
  border:none;
  border-bottom: #E64340 1px solid;
  background: #FFFFFF;
  border-radius: 0;
}
.calendar .week .selected {
  border:none;
  background: #FFB61D;
  border-bottom: #FFB61D 1px solid;
  color: #FFFFFF;
}
.calendar .week .disabled {
  border:none;
  background: #FFFFFF;
  border-bottom: #FFFFFF 1px solid;
  color: #888888;
}
fqhbj
关注
  • 1
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 8
    评论
专栏目录
评论 8
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值