美文网首页小程序Web前端之路让前端飞
微信小程序时间预约插件(包含日历)

微信小程序时间预约插件(包含日历)

作者: 李佳明先生 | 来源:发表于2017-10-28 14:01 被阅读312次

    因为项目需要,做了一个类似电商的时间预约功能,觉得有用,就独立出来成了个小插件。

    QQ截图20171028135342.png

    部分js代码

    var that=this;
        function getThisMonthDays(year, month) {
          return new Date(year, month, 0).getDate();
        }
      // 计算每月第一天是星期几
        function getFirstDayOfWeek(year, month) {
        return new Date(Date.UTC(year, month - 1, 1)).getDay();
        }
        const date = new Date();
        const cur_year = date.getFullYear();
        const cur_month = date.getMonth() + 1;
        const cur_date=date.getDate();
        const weeks_ch = ['日', '一', '二', '三', '四', '五', '六'];
        //利用构造函数创建对象
        function calendar(date,week){
          this.date=cur_year+'-'+cur_month+'-'+date;
          if(date==cur_date){
            this.week = "今天";
          }else if(date==cur_date+1){
            this.week = "明天";
          }else{
            this.week = '星期' + week;
          }
        }
        //当前月份的天数
        var monthLength= getThisMonthDays(cur_year, cur_month)
        //当前月份的第一天是星期几
        var week = getFirstDayOfWeek(cur_year, cur_month)
        var x = week;
        for(var i=1;i<=monthLength;i++){
          //当循环完一周后,初始化再次循环
          if(x>6){
            x=0;
          }
          //利用构造函数创建对象
          that.data.calendar[i] = new calendar(i, [weeks_ch[x]][0])
          x++;
        }
        //限制要渲染的日历数据天数为7天以内(用户体验)
        var flag = that.data.calendar.splice(cur_date, that.data.calendar.length - cur_date <= 7 ? that.data.calendar.length:7)
        that.setData({
          calendar: flag
        })
        //设置scroll-view的子容器的宽度
        that.setData({
          width: 186 * parseInt(that.data.calendar.length - cur_date <= 7 ? that.data.calendar.length : 7)
        })
    

    源代码地址https://github.com/iJarmin/calendar-and-order.git

    相关文章

      网友评论

      • 2cd3ed8eafb6:[weeks_ch[x]][0]这个代表的是什么?

        function getThisMonthDays(year, month) {
        return new Date(year, month, 0).getDate();
        }

        function getThisMonthDays()里的month为什么不跟getFirstDayofWeek()里的一样month-1???
        李佳明先生:js的utc方法月份是从0开始的,0~11,w3c里有的

      本文标题:微信小程序时间预约插件(包含日历)

      本文链接:https://www.haomeiwen.com/subject/xbqspxtx.html