日历,类似旅行网站的酒店入住

1.首先输入点击要能够有两个日历

画出月份,大部分是5x7行,但是也会有6x7的情况(1号为周六)

计算1号的位置,月份的清空,画月份时候,当日的判断。

//画表格行数
        var rows = Math.ceil((maxDay+first)/7); 
        var beforeTable = '<div id="'+strDate+'" class="data-calendar" style="display: block;"><table><thead><tr><th>日</th><th>一</th><th>二</th><th>三</th><th>四</th><th>五</th><th>六</th></tr></thead><tbody>';
        var table;
        for(var i = 0 ; i < rows ; i++){
            table += "<tr>" ;
            for( var j = 1 ; j <= 7 ; j++){
                //table += "<td>"+ (j  + 7 * i) +"</td>" //周日就是1号的判断
                table += "<td></td>" 
            }
            table+="</tr>"
        }
        var afterTable = '</tbody></table></div>';
        $("#calendar").after(beforeTable + table + afterTable);


        //填日期
        for(var i = first,j = 1 ; i < tableNum,j<=maxDay ; i++,j++){
            if(i != today){
                //$(".data-calendar td").eq(i).css({"color":"#000"});
            }else{
                var num = first + today - 1;
                $(".data-calendar td").eq(num).css({"color":"#ff3366"});
            }
            $(".data-calendar td").eq(i).html(j);
        }

2.input框 click 和 change时候的区分

3.选择范围

4.更改年月日(两种情况,在input里面修改没啥特别的,在表格里面改,要把drawTable()做的更具复用性)

原文地址:https://www.cnblogs.com/della/p/3615500.html