js 日历

　　项目中有一要求是经过日历选择日期，在网上找了好多插件都不太符合，因而想本身写一个，奈何本身技术不咋地，不会写，因而在网上找了不少资料，终于找到了一位大神写的js 日历的教程，至于那位大神的文章，如今已经忘了，按照他的思路，我说一说本身的经验吧！

　　其实，js写日历有3个关键

　　第一是 根据年月判断有多少天

function(year,imonth){
    var month=parseInt(imonth);
    var temp=new Date(year,month,0);
    return temp.getDate();
};

　　第二是 一共有多少行

function(idays,iweek){
    return Math.ceil((idays + iweek)/7);
};

　　第三步是 处理月的第一天是星期几　

function (iyear,imonth,iday){
    var day=new Date(iyear,imonth,iday);
    return day.getDay();
};

　　3个关键说完了，如今来讲下具体js日历流程

　　（1）求出当前时间，年 月 日

        var nowDay=new Date();
        var nowYear=nowDay.getFullYear();
        var nowMonth=nowDay.getMonth();
        var nowDays=nowDay.getDate();    

　　（2）接下来就是咱们说的3个关键

//该月一共有多少天 
var numDay=function(){
     var temp=new Date(nowYear,nowMonth+1,0);
     return temp.getDate();
}
//该月的第一天是星期几
var weekDay=function (){
    var day=new Date(nowYear,nowMonth,1);
    return day.getDay();
};
//该月一共有几行
var numLine=function(){
    return Math.ceil((numDay + weekDay)/7);
};

　　（3）就是画出日历

 //画出日历 xyear限制的年份 xmonth 月份 xday 限制的那一天  darwyear 绘制的那一年  drawmonth绘制的那个月份  sumday一月多少天  weeknow 第一天是周几  lins 一共绘制几行
    function draw(xyear,xmonth,xday,darwyear,drawmonth,sumday,weeknow,lins){
        var string="<div class='calendar-btn'><span class='prev' id='prev'></span><span class='year-btn'>";
        string+=darwyear;
        string+="</span><span>年</span><span class='month-btn'>";
        string+=drawmonth;
        string+="</span><span>月</span><span class='next' id='next'></span></div><div class='calendar-body'><table><thead><tr><td>Sun</td><td>Mon</td><td>Tue</td><td>Wed</td><td>Thu</td><td>Fri</td><td>Sat</td></tr></thead><tbody>";


        for(var i=0;i<lins;i++){

            string+="<tr>";
            for(var k=0; k<7;k++){
               var idx=i*7+k; //单元格天然序列号
               var day=idx-weeknow+1; //计算日期
                (day<=0 || day>sumday) ?  day="" :  day=idx-weeknow+1; //过滤无效日期（小于等于零的、大于月总天数的）;

                if(darwyear==xyear && xmonth==(drawmonth-1)){

                    if(day!=""){
                        day>=xday? day="<td><a href='javascript:;'>"+day+"</a></td>":day="<td>"+day+"</td>";
                    }else{
                        day="<td>"+day+"</td>";
                    }

                }else if((darwyear==xyear &&(drawmonth-1)>xmonth) || darwyear >xyear){
                    if(day!="") {
                        day = "<td><a href='javascript:;'>" + day + "</a></td>";
                    }else{
                            day="<td>"+day+"</td>";
                        }
                }else{
                    day="<td>"+day+"</td>";
                }

                string+=day;


            }

            string+="</tr>";
        }
        string+="</tbody></table></div>";
        $("#id”).append(string);

    }

　　　　好比说你想限制今天以前不能选就把上面参数传入

　　 (4) 上一个月，下一个月 重画日历

　　　　到了这一步基本上日历算是完了，由于 第四步就是重复第2步和第3步的工做，不如说上一个月就先求出上个月有多少天，第一天是周几，一共绘制几行等等，下个月同理。

　　如今日历是作好了，想要日历变得好看，就给他穿上css吧 。

　　功能不一样的日历，就是改变第三步画日历的代码