小程序日历

主要实现以选择时间段的展示及禁用时间不可选功能，代码写得有点啰嗦 ，勿喷

效果图：

.js

var startClick = '';

var endClick = '';

var selectDays = [];

var clickStatus = false;

var daysNum = 0;

Page({

  /**

  * 页面的初始数据

  */

  data: {

    thisYear: '',

    thisMonth: '',

    thisMonthArr: [],

    nextM_start:[],

    today: new Date().getDate(),

    nextYear: '',

    nextMonth: '',

    nextMonthArr: [],

    bindDays:[],//默认禁止选择时间[20191219，20200103，20190104]

    selectDays:[], //默认选择的开始时间和结束时间 格式[20191203,20192012]

    selectStatus:false, 

    startClick:'', //开始时间

    endClick:'', //结束时间

    daysNum:0 //总共选中天数

  },

  /**

  * 生命周期函数--监听页面加载

  */

  onLoad: function (options) {


    var bindDays = options.bindDays || [];

    bindDays = bindDays.split(',');

    console.log(bindDays);

    var selectDays = options.selectDays || [];

    if (selectDays != ''){

      selectDays = selectDays.split(',');

      selectStatus = true;

      startClick = selectDays[0];

      endClick = selectDays[1];

    }

    bindDays = ['20191219', '20200110'];

    startClick = selectDays[0];

    endClick = selectDays[1];


    //初始化日历数据

    var nextM_start = new Date(new Date(new Date().toLocaleDateString()).setMonth(new Date().getMonth() + 1)); //下一个月

    var thisMonthArr = this.getDateArr(new Date(), bindDays, selectDays, clickStatus);

    var nextMonthArr = this.getDateArr(nextM_start, bindDays, selectDays, clickStatus);

    this.setData({

      thisYear: new Date().getFullYear(),

      thisMonth: new Date().getMonth() + 1,

      nextYear: nextM_start.getFullYear(),

      nextMonth: nextM_start.getMonth() + 1,

      thisMonthArr: thisMonthArr,

      nextMonthArr: nextMonthArr,

      bindDays: bindDays,

      selectDays: selectDays,

      nextM_start: nextM_start,

      startClick: startClick,

      endClick: endClick

    })

    wx.hideLoading();

  },

  select_date: function (e) {

    //如果点击项为空百项目，不继续执行

    var status = e.currentTarget.dataset.status;

    if (status == true) {

      return ;

    }

    if (endClick != ''){

      startClick = '';

      endClick = '';

      selectDays = [];

      daysNum = 0;

    }

    var thisTime = e.currentTarget.dataset.time;

    if(startClick == ''){

      startClick = thisTime;

    }else{

      if (selectDays[0] == selectDays[1]){

        // console.log('1' + selectDays)

        selectDays = [];

        // console.log('2:'+startClick)

        selectDays.push(startClick);

      }

      endClick = thisTime;

    }

    selectDays.push(thisTime);

    var nextM_start = new Date(new Date(new Date().toLocaleDateString()).setMonth(new Date().getMonth() + 1)); //下一个月

    var thisMonthArr = this.getDateArr(new Date(), this.data.bindDays, selectDays ,true);

    var nextMonthArr = this.getDateArr(this.data.nextM_start, this.data.bindDays, selectDays,true);

    this.setData({

      selectDays: selectDays,

      startClick: startClick,

      endClick: endClick,

      selectDays: selectDays,

      nextMonthArr: nextMonthArr,

      nextM_start: nextM_start,

      thisMonthArr: thisMonthArr

    })

  },

  submit:function(){

    // console.log(daysNum)

    wx.showLoading({

      title: '加载中...',

      mask: true

    })

    // var pages = getCurrentPages();

    // console.log(pages)

    daysNum = daysNum - 1;

    console.log(daysNum)

    wx.navigateTo({

      url: "../order/index?bindDays=" + this.data.bindDays + '&selectDays=' + this.data.selectDays + '&daysNum=' + daysNum,

    })

  },

  //根据指定年月获得当月天数

  mGetDate(year, month) {

    var d = new Date(year, month, 0);

    return d.getDate();

  },

  //根据指定年月获得当月日历数组

  getDateArr(date, bindDays, selectDays, prohibit) {

    //根据指定年月

    //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;

    var time = '';

    //禁用

    let bindD = [];

    var bmon = '';

    var bd = '';

    //选中

    var selmon = [];

    var seld = [];

    monthArray[week] = new Array(); //声明本周的二维数组

    for (var i = 0; i < bindDays.length; i++) {

      bmon = parseInt(bindDays[i].substring(4, 6));

      bd = parseInt(bindDays[i].substring(6, 9));

      if (bmon == thisMonth){

        bindD.push(bd);

      }

    }

    // console.log(selectDays)

    if (selectDays.length > 0){


      var selMonStart = parseInt(selectDays[0].substring(4, 6));

      var selDayStart = parseInt(selectDays[0].substring(6, 9));

      if (!selectDays[1]){

        selectDays.push(selectDays[0]) ;

      }

      var selMonEnd = parseInt(selectDays[1].substring(4, 6));

      var selDayEnd = parseInt(selectDays[1].substring(6, 9));

      selmon.push(selMonStart);

      selmon.push(selMonEnd);

      seld.push(selDayStart);

      seld.push(selDayEnd);

    }



    //循环当月的每一天

    for (var k = 1; k <= monthNum; k++) {

      isToday = false;

      //组装当前日期

      oneDay = thisYear + ',' + thisMonth + ',' + k;

      var _month = thisMonth ;

      if (_month < 10){

        _month = '0' + thisMonth

      }

      var _day = k;

      if (_day < 10){

        _day = '0' + _day

      }

      time = thisYear + '' + _month + '' + _day;

      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,

              prohibit: false,

              time: ''

            };

          }

        }

      }


      if (bindD.indexOf(k) > -1) {

        monthArray[week][witchDay] = {

          date: k,

          isToday: isToday,

          state: false,

          prohibit :true,

          time: time

        };

      }

      else if (selmon.length > 0 && selmon.indexOf(thisMonth) > -1) {


        if (selmon[0] == selmon[1] && k >= seld[0] && k <= seld[1]){

          // console.log(seld[1])

          monthArray[week][witchDay] = {

            date: k,

            isToday: isToday,

            state: true,

            prohibit: false,

            time: time

          };

          daysNum ++ ;

        } else if (selmon[0] == thisMonth && selmon[1] != thisMonth && k >= seld[0]){

          monthArray[week][witchDay] = {

            date: k,

            isToday: isToday,

            state: true,

            prohibit: false,

            time: time

          };

          daysNum++;

        } else if (selmon[1] == thisMonth && selmon[0] != thisMonth && k <= seld[1]) {

          monthArray[week][witchDay] = {

            date: k,

            isToday: isToday,

            state: true,

            prohibit: false,

            time: time

          };

          daysNum++;

        } else {

          monthArray[week][witchDay] = {

            date: k,

            isToday: isToday,

            state: false,

            prohibit: false,

            time: time

          };

        }


      }

      else

      {

        monthArray[week][witchDay] = {

          date: k,

          isToday: isToday,

          state: false,

          prohibit: false,

          time: time

        };

      }

      //如果已经是周六，切换到下一周

      if (witchDay == 6) {

        week++;

        monthArray[week] = new Array(); //声明本周的二维数组

      }

    }

    monthArray.splice(0, 1); //删除下标为0的空元素

    // console.log(monthArray); 

    return monthArray;

  },

})

.wxml

<view bindtap="submit">确定</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]['state']==true?'selected':''}} {{item[0]['prohibit']==true?'bg-g3 ':''}}"

          data-month='thisMonth'

          data-key='{{index}}'

          data-keyitem='0'

          data-time="{{item[0]['time']}}"

          data-status="{{item[0]['prohibit']}}"

          bindtap="select_date">{{item[0]['date']}}</text>

        <text

          class=" {{item[1]['state']==true?'selected':''}} {{item[1]['prohibit']==true?'bg-g3 ':''}}"

          data-month='thisMonth'

          data-key='{{index}}'

          data-keyitem='1'

          data-time="{{item[1]['time']}}"

          data-status="{{item[1]['prohibit']}}"

          bindtap="select_date">{{item[1]['date']}}</text>

        <text

          class="{{item[2]['state']==true?'selected':''}} {{item[2]['prohibit']==true?'bg-g3 ':''}}"

          data-month='thisMonth'

          data-key='{{index}}'

          data-keyitem='2'

          data-time="{{item[2]['time']}}"

          data-status="{{item[2]['prohibit']}}"

          bindtap="select_date">{{item[2]['date']}}</text>

        <text

          class="{{item[3]['state']==true?'selected':''}} {{item[3]['prohibit']==true?'bg-g3 ':''}}"

          data-month='thisMonth'

          data-key='{{index}}'

          data-keyitem='3'

          data-time="{{item[3]['time']}}"

          data-status="{{item[3]['prohibit']}}"

          bindtap="select_date">{{item[3]['date']}}</text>

        <text

          class=" {{item[4]['prohibit']==true?'bg-g3 ':''}} {{item[4]['state']==true?'selected':''}}"

          data-month='thisMonth'

          data-key='{{index}}'

          data-keyitem='4'

          data-time="{{item[4]['time']}}"

          data-status="{{item[4]['prohibit']}}"

          bindtap="select_date">{{item[4]['date']}}</text>

        <text

          class="{{item[5]['prohibit']==true?'bg-g3 ':''}}{{item[5]['state']==true?'selected':''}}"

          data-month='thisMonth'

          data-key='{{index}}'

          data-keyitem='5'

          data-time="{{item[5]['time']}}"

          data-status="{{item[5]['prohibit']}}"

          bindtap="select_date">{{item[5]['date']}}</text>

        <text

          class="{{item[6]['prohibit']==true?'bg-g3':''}} sunday {{item[6]['state']==true?'selected':''}}"

          data-month='thisMonth'

          data-key='{{index}}'

          data-keyitem='6'

          data-time="{{item[6]['time']}}"

          data-status="{{item[6]['prohibit']}}"

          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':''}} {{item[0]['prohibit']==true?'bg-g3':''}}"

          data-date="{{item[0]['date']}}"

          data-key='{{index}}'

          data-keyitem='0'

          data-time="{{item[0]['time']}}"

          data-status="{{item[0]['prohibit']}}"

          bindtap="select_date">{{item[0]['date']}}</text>

        <text

          class="{{item[1]['state']==true?'selected':''}} {{item[1]['prohibit']==true?'bg-g3':''}}"

          data-date="{{item[1]['date']}}"

          data-key='{{index}}'

          ata-keyitem='1'

          data-time="{{item[1]['time']}}"

          data-status="{{item[1]['prohibit']}}"

          bindtap="select_date">{{item[1]['date']}}</text>

        <text

          class="{{item[2]['state']==true?'selected':''}} {{item[2]['prohibit']==true?'bg-g3':''}}"

          data-date="{{item[2]['date']}}"

          data-key='{{index}}'

          ata-keyitem='2'

          data-time="{{item[2]['time']}}"

          data-status="{{item[2]['prohibit']}}"

          bindtap="select_date">{{item[2]['date']}}</text>

        <text

          class="{{item[3]['state']==true?'selected':''}} {{item[3]['prohibit']==true?'bg-g3':''}}"

          data-date="{{item[3]['date']}}"

          data-key='{{index}}'

          data-keyitem='3'

          data-time="{{item[3]['time']}}"

          data-status="{{item[3]['prohibit']}}"

          bindtap="select_date">{{item[3]['date']}}</text>

        <text

          class="{{item[4]['state']==true?'selected':''}} {{item[4]['prohibit']==true?'bg-g3':''}}"

          data-date="{{item[4]['date']}}"

          data-key='{{index}}'

          data-keyitem='4'

          data-time="{{item[4]['time']}}"

          data-status="{{item[4]['prohibit']}}"

          bindtap="select_date">{{item[4]['date']}}</text>

        <text

          class="{{item[5]['state']==true?'selected':''}} {{item[5]['prohibit']==true?'bg-g3':''}}"

          data-date="{{item[5]['date']}}"

          data-key='{{index}}'

          data-keyitem='5'

          data-time="{{item[5]['time']}}"

          data-status="{{item[5]['prohibit']}}"

          bindtap="select_date"

        >{{item[5]['date']}}</text>

        <text

          class="sunday {{item[6]['state']==true?'selected':''}} {{item[6]['prohibit']==true?'bg-g3':''}}"

          data-date="{{item[6]['date']}}"

          data-key='{{index}}'

          data-keyitem='6'

          data-time="{{item[6]['time']}}"

          data-status="{{item[6]['prohibit']}}"

          bindtap="select_date"

        >{{item[6]['date']}}</text>

    </view>

    </block>

  </view>

</scroll-view>

.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;

}

.calendar .week .prohibit {

  border:none;

  background: #FFB61D;

  border-bottom: #FFB61D 1px solid;

  color: #FFFFFF;

}


最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
禁止转载，如需转载请通过简信或评论联系作者。
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 215,384评论 6赞 497
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 91,845评论 3赞 391
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 161,148评论 0赞 351
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 57,640评论 1赞 290
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 66,731评论 6赞 388
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 50,712评论 1赞 294
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,703评论 3赞 415
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 38,473评论 0赞 270
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,915评论 1赞 307
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,227评论 2赞 331
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,384评论 1赞 345
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 35,063评论 5赞 340
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,706评论 3赞 324
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,302评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,531评论 1赞 268
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 47,321评论 2赞 368
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 44,248评论 2赞 352