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吧 。

　　功能不一樣的日曆，就是改變第三步畫日曆的代碼