一个js写的日历（代码部分网摘）_时间日期

特意贴出这段代码，因为它的代码简洁和清晰，觉得不错，供大家分享。 ×××××××函数定义部分

复制代码 代码如下: var $ = function (id) { return "string" == typeof id ? document.getElementById(id) : id; }; var Class = { create: function() { return function() { this.initialize.apply(this, arguments); } } } var Extend = function(destination, source) { for (var property in source) { destination[property] = source[property]; } return destination; } var Calendar = Class.create(); Calendar.prototype = { initialize: function(container, options) { this.Container = $(container);//容器(table结构) this.Days = [];//日期对象列表 this.SetOptions(options); this.Year = this.options.Year || new Date().getFullYear(); this.Month = this.options.Month || new Date().getMonth() + 1; this.SelectDay = this.options.SelectDay ? new Date(this.options.SelectDay) : null; this.onSelectDay = this.options.onSelectDay; this.onToday = this.options.onToday; this.onFinish = this.options.onFinish; this.Draw(); }, //设置默认属性 SetOptions: function(options) { this.options = {//默认值 Year: 0,//显示年 Month: 0,//显示月 SelectDay: null,//选择日期 onSelectDay: function(){},//在选择日期触发 onToday: function(){},//在当天日期触发 onFinish: function(){}//日历画完后触发 }; Extend(this.options, options || {}); }, //当前月 NowMonth: function() { this.PreDraw(new Date()); }, //上一月 PreMonth: function() { this.PreDraw(new Date(this.Year, this.Month - 2, 1)); }, //下一月 NextMonth: function() { this.PreDraw(new Date(this.Year, this.Month, 1)); }, //上一年 PreYear: function() { this.PreDraw(new Date(this.Year - 1, this.Month - 1, 1)); }, //下一年 NextYear: function() { this.PreDraw(new Date(this.Year + 1, this.Month - 1, 1)); }, //根据日期画日历 PreDraw: function(date) { //再设置属性 this.Year = date.getFullYear(); this.Month = date.getMonth() + 1; //重新画日历 this.Draw(); }, //画日历 Draw: function() { //用来保存日期列表 var arr = []; //用当月第一天在一周中的日期值作为当月离第一天的天数 for(var i = 1, firstDay = new Date(this.Year, this.Month - 1, 1).getDay(); i //用当月最后一天在一个月中的日期值作为当月的天数 for(var i = 1, monthDay = new Date(this.Year, this.Month, 0).getDate(); i //清空原来的日期对象列表 this.Days = []; //插入日期 var frag = document.createDocumentFragment(); while(arr.length){ //每个星期插入一个tr var row = document.createElement("tr"); //每个星期有7天 for(var i = 1; i var cell = document.createElement("td"); cell.innerHTML = " "; if(arr.length){ var d = arr.shift(); if(d){ cell.innerHTML = d; this.Days[d] = cell; var on = new Date(this.Year, this.Month - 1, d); //判断是否今日 this.IsSame(on, new Date()) && this.onToday(cell); //判断是否选择日期 this.SelectDay && this.IsSame(on, this.SelectDay) && this.onSelectDay(cell); } } row.appendChild(cell); } frag.appendChild(row); } //先清空内容再插入(ie的table不能用innerHTML) while(this.Container.hasChildNodes()){ this.Container.removeChild(this.Container.firstChild); } this.Container.appendChild(frag); //附加程序 this.onFinish(); }, //判断是否同一日 IsSame: function(d1, d2) { return (d1.getFullYear() == d2.getFullYear() && d1.getMonth() == d2.getMonth() && d1.getDate() == d2.getDate()); } } ××××××××样式表的定义 复制代码 代码如下: .Calendar { font-family:Verdana; font-size:12px; background-color:#e0ecf9; text-align:center; width:400px; height:180px; padding:10px; line-height:1.5em; } .Calendar a{ color:#1e5494; } .Calendar table{ width:100%; border:0; } .Calendar table thead{color:#acacac;} .Calendar table td { font-size: 11px; padding:1px; } #idCalendarPre{ cursor:pointer; float:left; padding-right:5px; } #idCalendarNext{ cursor:pointer; float:right; padding-right:5px; } #idCalendar td.onToday { font-weight:bold; color:#C60; } #idCalendar td.onSelect { font-weight:bold; } #buttonposition{ margin-left: 10%; } ***********下面是应用的主体部分 复制代码 代码如下: >> 年 月 日 一 二 三 四 五 六 var cale = new Calendar("idCalendar", { onToday: function(o){ o.className = "onToday"; }, onFinish: function(){ $("idCalendarYear").innerHTML = this.Year; $("idCalendarMonth").innerHTML = this.Month; } }); $("idCalendarPre").onclick = function(){ cale.PreMonth(); } $("idCalendarNext").onclick = function(){ cale.NextMonth(); } $("idCalendarPreYear").onclick = function(){ cale.PreYear(); } $("idCalendarNextYear").onclick = function(){ cale.NextYear(); } $("idCalendarNow").onclick = function(){ cale.NowMonth(); }

一个js写的日历（代码部分网摘）_时间日期

相關文章