首页 > 代码库 > 日期控件-V1
日期控件-V1
<!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
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。