<!--html-->

      
       
       
预约日程
       
       
         
        
            
         
             
                      
         
            
         
                        2016年5月            
         
            
         
              
                      
         
         
        
         
        
            
         
              
          
日
              
          
一
              
          
二
              
          
三
              
          
四
              
          
五
              
          
六
            
         
         
        
         
        
             
         
         
        
       
       
      
      

<!--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 = '
';            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 = '
' + i + '
';                Oul.append(html);            } else {                html = '
' + i + '
';                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
      
       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']);
      

<!--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;        }      }    }    }}

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

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

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