日期控件-V1

时间：2014-09-09 11:08:48 阅读：332 评论：0 收藏：0 [点我收藏+]
标签：style blog http color io java ar for div
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<link rel="stylesheet"  href="../css/rest.css"/>
<script src="../js/jquery1.7.2.js"></script>
<title>date html</title>
<style>
*{margin:0;padding:0;}
#dateTab{
    border-collapse: collapse;
    border: none;
    width: 100%;
}
#dateTab td,#dateTab th{
    padding: 5px;
    text-align: center;
    border: 4px solid #cccccc;
    cusor: default;
}
#dateTab tbody td:hover{
    background:blue;
    color: #ffffff;
}
#dateBox{
    width: 300px;
    margin: 20px auto;
}
</style>
<script>
$(function(){
    console.log($("#dateTab").html());
    createOption($("#month"), 12);
    var dateCombox = new dateBox();
    $("#search").click(function(e){
        var y = $("#year").val();
        var m = $("#month").val();
        dateCombox.reDraw({
            year: y,
            month: m
        })
    })
})
function createOption(box,num){
    for(var i=0; i<num; i++){
        var option = $("<option>",{"value":i+1,"text":i+1});
        box.append(option);
    }
}
var dateBox = function(o){
    var nowDate = new Date();
    this.year = nowDate.getFullYear();
    this.month = nowDate.getMonth() +1;
    this.date = nowDate.getDate();
    this.day = nowDate.getDay();
    this.hours = nowDate.getHours();
    this.minutes = nowDate.getMinutes();
    this.seconds = nowDate.getSeconds();
    this.id = "dateBox";
    
    var o = o || {};
    for(var key in o){
        this[key] = o[key];
    }
    this.init();
}
dateBox.prototype.reDraw=function(o){
    var nowDate = new Date();
    this.year = nowDate.getFullYear();
    this.month = nowDate.getMonth() +1;
    this.date = nowDate.getDate();
    this.day = nowDate.getDay();
    this.hours = nowDate.getHours();
    this.minutes = nowDate.getMinutes();
    this.seconds = nowDate.getSeconds();
    this.id = "dateTab";
    
    var o = o || {};
    for(var key in o){
        this[key] = o[key];
    }
    this.draw();
}
dateBox.prototype.cHead=function(){
    var self = this;
    var box = $("<div>",{"style":"text-align:center;"});
    var prev = $("<a>", {"text":"<", "href":"javascript:;", "style":"float:left;"});
    var next = $("<a>", {"text":">", "href":"javascript:;", "style":"float:right;"});
    var showMonth = $("<span>",{"text":self.month/1+"月"})
    var yearSelect=$("<select>");
    prev.bind("click", function(e){
        var year = self.year/1;
        var month = self.month/1;
        if(month == 1){
            year = year -1;
            month = 12;
            yearSelect.val(year);
        }else{
            month = month -1;
        }
        self.reDraw({
            year: year,
            month: month
        });
        showMonth.html(month+"月");
    });
    next.bind("click", function(e){
        var year = self.year/1;
        var month = self.month/1;
        if(month == 12){
            year = year + 1;
            month = 1;
            yearSelect.val(year);
        }else{
            month = month + 1;
        }
        self.reDraw({
            year: year,
            month: month
        });
        showMonth.html(month+"月");
    });
    yearSelect.bind("change", function(){
        var year = $(this).val();
        var month = self.month/1;
        self.reDraw({
            year: year,
            month: month
        })
    })
    for(var i=(self.year/1)-10; i<(self.year/1)+10; i++){
        var option = $("<option>", {"value":i,"text":i});
        yearSelect.append(option);
    }
    box.append(next, prev, yearSelect,showMonth);
    $("#"+self.id).prepend(box);
    yearSelect.val(self.year);
}
dateBox.prototype.init=function(){
    var self = this;
    
    self.cHead();
    self.draw();
}
dateBox.prototype.draw=function(){
    var self = this;
    var tbody = $("#"+self.id).find("tbody");
    
    var Y = self.year,
        M = self.month,
        D = self.date,
        d = self.day,
        m = self.minutes,
        h = self.hours,
        s = self.seconds;
    var day = self.getMonthDay(Y, M);
    var html = "<tr>";
    var    index = 0;
    for(var i=0; i<d; i++){
        html += "<td> </td>";
        index++;
    }
    for(var i=0; i<day; i++){
        if(index%7 == 0){
            html += "</tr></tr>";
        }
        html += "<td>"+(i+1)+"</td>";
        index++;
    }
    for(var i=0; i<7; i++){
        if(index%7 == 0){
            break;
        }
        html +="<td>"
        index++;
    }
    html +="</tr>";
    tbody.html(html);
}
dateBox.prototype.getMonthDay = function(y, m){
    var isLeap = false;
    if((y%400 == 0 || y%4 == 0) && y%100 != 0){
        isLeap = true;
    }
    var m = m+"";
    switch (m){
        case "1":
        case "3":
        case "5":
        case "7":
        case "8":
        case "10":
        case "12":
            return 31;
        case "4":
        case "6":
        case "9":
        case "11":
            return 30;
        case "2":
            return (isLeap?28:30);
    }
}
</script>
</head>
<body>
    <div id="dateBox">
        <table id="dateTab">
            <thead>
                <tr>
                    <th>日</th>
                    <th>一</th>
                    <th>二</th>
                    <th>三</th>
                    <th>四</th>
                    <th>五</th>
                    <th>六</th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>
</body>
</html>
日期控件-V1
标签：style blog http color io java ar for div
原文地址：http://www.cnblogs.com/humiaoicm/p/3961524.html
踩
(0)
评论一句话评论（0）
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行