移动端日期段选择，不可选过去日期，可传入不可选日期，返回数组

Posted 2020-07-23 落暮

<!--html-->

 <section class="four">
       <h2 class="tj">预约日程</h2>
       <div class="apd-data" id=\'dataTime\'>
         <div class="apd-top">
            <div class="left">
             <i class="iconfont">&#xe60c;</i>
            </div>
            <div class="center">
              2016年5月
            </div>
            <div class="right">
              <i class="iconfont">&#xe60d;</i>
            </div>
         </div>
         <div class="apd-xingqi">
            <ul>
              <li>日</li>
              <li>一</li>
              <li>二</li>
              <li>三</li>
              <li>四</li>
              <li>五</li>
              <li>六</li>
            </ul>
         </div>
         <div class="apd-md">
             <ul></ul>
         </div>
       </div>
      </section>

View Code

<!--js模块-->

function apdData(elem, insArry) {
    /*elem为外层id
    insArry为已预定日期*/
    var date = new Date();
    var y = date.getFullYear();
    var m = date.getMonth() + 1;
    var d = date.getDate();
    var elem = $("#" + elem);
    // 存储当前日期
    var nowYear = y;
    var nowMonth = m;
    var nowDate = d;
    var Oul = elem.find(".apd-md ul");
    var left=elem.find(".left");
    var right=elem.find(".right");
    //今天日期
    elem.find(\'.apd-top .center\').html(y + \'年\' + m + \'月\');
    // 清空显示日历的div
    function clearDiv() {
        Oul.html(\'\');
    }
    left.tap(function(){
        nowMonth--;
        if(nowMonth===0){
            nowMonth=12;
            nowYear--;
        }
        clearDiv();
        showDate();
        elem.find(\'.apd-top .center\').html(nowYear + \'年\' + nowMonth + \'月\');
    })

    right.tap(function(){
        nowMonth++;
        if(nowMonth===13){
            nowMonth=1;
            nowYear++;
        }
        clearDiv();
        showDate();
        elem.find(\'.apd-top .center\').html(nowYear + \'年\' + nowMonth + \'月\');
    })
    
    // 初始化日历
    function showDate() {       
        var li = new Array();
        //总天数
        var sumDay = 0;
        //计算年
        for (var i = 1900; i < nowYear; i++) {
            //判断闰年和平年
            if ((i % 4 == 0 && i % 100 !== 0) || (i % 400 == 0)) {
                sumDay += 366;
            } else {
                sumDay += 365;
            }
        }

        // 计算月
        for (var i = 1; i < nowMonth; i++) {
            if (i == 1 || i == 3 || i == 5 || i == 7 || i == 8 || i == 10 || i == 12) {
                sumDay += 31;
            } else if (i == 2) {
                if ((nowYear % 4 == 0 && nowYear % 100 !== 0) || (nowYear % 400 == 0)) {
                    sumDay += 29;
                } else {
                    sumDay += 28;
                }
            } else {
                sumDay += 30;
            }
        }
        //算出某年某月的1号是星期几
        sumDay += 1;
        var weekDay = sumDay % 7;
        var html = \'\';
        for (var i = 0; i < weekDay; i++) {
            html = \'<li></li>\';
            Oul.append(html);
        }

        //判断现在的月份有多少天
        var monthDay = 0;
        if (nowMonth == 2) {
            if ((nowYear % 4 == 0 && nowYear % 100 != 0) || nowYear % 400 === 0) {
                monthDay = 29;
            } else {
                monthDay = 28;
            }
        }
        //小月30天
        else if (nowMonth == 4 || nowMonth == 6 || nowMonth == 9 || nowMonth == 11) {
            monthDay = 30;
        } else {
            monthDay = 31;
        }

        // 输出所有农历
        for (var i = 1; i <= monthDay; i++) {
            if (sumDay % 7 == 6) {
                html = \'<li id="li\' + i + \'" dataTime=\'+nowYear+","+nowMonth+","+i+\'>\' + i + \'</li>\';
                Oul.append(html);
            } else {
                html = \'<li id="li\' + i + \'" dataTime=\'+nowYear+","+nowMonth+","+i+\'>\' + i + \'</li>\';
                Oul.append(html);
               
            }
            sumDay++;
        }
        // 后台传入的对应格式加禁用class
        if(typeof insArry === \'object\'){    
        Oul.find(\'li\').each(function(index, el) {
            var self=$(this);
            var co=$(this).attr(\'dataTime\');
            $.each(insArry,function(index, el) {
                if(co==insArry[index]){
                   self.addClass(\'disable\');
                }
            });
        });
        }

        //让当前天背景高亮
        for (var i = 1; i <=monthDay; i++) {
            if (nowYear == y && nowMonth == m && $("#li" + i).html() == d) {
                $("#li" + i).addClass(\'now\');
            }
            else if(nowYear<=y){
                if(nowYear==y&&nowMonth<=m){
                    if(nowMonth==m&&nowDate<=d){
                      if(i<d){
                        $("#li" + i).addClass(\'disable\');
                      }
                    }
                    else if(nowMonth<m){
                        $("#li" + i).addClass(\'disable\');
                         console.log(i)
                    }
                }
                else if(nowYear<y){
                    $("#li" + i).addClass(\'disable\');
                }              
            }

        }
    }
    showDate();
    var status=false;
    var s1,s2;
    Oul.find(\'li\').not(\'.disable\').tap(function(){
        if(status){         
           s2=$(this).index();
           var min=s2>s1?s1:s2;
           var max=s2>s1?s2:s1;
           for(var i=min;i<=max;i++){
            Oul.find(\'li\').eq(i).addClass(\'active\');
           }
            status=false;
            s1=0;
            s2=0;
        }
        else{
          if(!(s1>1||s2>1)){
            $(this).addClass(\'active\').siblings(\'li\').removeClass(\'active\');
          }
          s1=Oul.find(\'.active\').index();
          status=true;
        }        
    })
}
// 下面是调用
$("#sub").tap(function(){
    var outArry=[];
    $("#dataTime li").each(function(index, el) {
        var self=$(this);
        var co=$(this).attr(\'class\');
        if(co&&co.indexOf(\'active\')>-1){
            outArry.push(self.attr(\'dataTime\'));        
        }  
    });
})
//下面是调用日历，第一个参数为id名第二个为已经被挑选的日期传入，没有的话\'\'即可
apdData("dataTime",[\'2016,6,30\',\'2016,6,29\']);

View Code

<!--sass部分-->

.apd-data{
    background:$cofff;
    border:#d9d9d9 solid 1px;
    padding:1rem 0.5rem;
    margin-top: 1rem;
    .apd-top{
        padding:0.5rem 0;
        @extend .clear;
        .left,.center,.right{
      @extend .fl;
            display: inline-block;;
            width: 10%;
            color:#7e7e7e;
        }
        .center{
            width: 80%;
        }
        .right{
            text-align: right;
        }
    }
// 上面是头部控制
    .apd-xingqi{
        
        background: #f5f5f5;
        ul{
            @extend .clear;
            li{
        border:#e2e2e2 solid 1px;
        
                color:#979797;
                font-size:1rem;
                width: 14.285%;
                @extend .fl;
                text-align: center;
                padding:0.5rem 0;
        cursor: pointer;
         min-height: 2rem;
            }
        }
    }
    // 上面是星期块
    .apd-md{
         ul{
      @extend .clear;
      
      li{
        border:#e2e2e2 solid 1px;
        color:#979797;
        background: #f5f5f5;
        font-size:1rem;
        width: 14.285%;
        @extend .fl;
        text-align: right;
        cursor: pointer;
        height: 2.5rem;
        padding:0 1rem;
        line-height: 2.5rem;
        &.disable{
          color:#b5b5b5;
          background:#fefefe;
          &:hover,&:active,&:link,&:focus,&:visited{
            background: #fefefe;
            color:#979797; 
          }
        }
        &.now{
          background: #CFC;
        }
        &.active{
          color:#fff;
          background: #f57aae;
          text-align: center;
        }
      }
    }
    }
}

View Code

注释：当时是在网上看到一个js的日历组件，比较易懂就拿下来，现在刚好用上，但是忘记出处了~

        时间关系没有做封装优化，写的很死，仅作个人备份（出租房的网速github是上不去的...）。

        之后什么时候闲下来了在重新写下，努力学jq插件及js原生中~