Js博客日历控件

2024-09-05 12:22:13

字体：大中小

来源：转载

供稿：网友

一款常见于博客的JavaScript日历组件，方便让用户选择日期时间，你可以将JS代码段另存，在需要的地方引入，注意，最后弹出的JS窗口是一个示例，你可以去掉onclick函数，在需要的ID标签处插入此值；CSS样式是初设的，如果感觉色调不搭配也可以自行修改。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>博客专用的JS日历控件</title><meta http-equiv="content-type" content="text/html;charset=gb2312"><style type="text/css"> .Calendar { font-family:Verdana; font-size:9pt; background-color:#EEE; text-align:center; width:198px; height:158px; padding:10px; line-height:1.5em; } .Calendar a{ color:#0066CC; } .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; } </style> <script type="text/javascript"> var $ = function (id) { return "string" == typeof id ? document.getElementById(id) : id; }; var Class = { create: function() { return function() { this.initialize.apply(this, arguments); } } } Object.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; this.Month = this.options.Month; 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: new Date().getFullYear(), Month: new Date().getMonth() + 1, SelectDay: null,//选择日期 onSelectDay: function(){}, onToday: function(){}, onFinish: function(){} }; Object.extend(this.options, options || {}); }, //上月 PreMonth: function() { //取得上月日期对象 var d = new Date(this.Year, this.Month - 2, 1); //设置属性 this.Year = d.getFullYear(); this.Month = d.getMonth() + 1; //重绘日历 this.Draw(); }, //下一个月 NextMonth: function() { var d = new Date(this.Year, this.Month, 1); this.Year = d.getFullYear(); this.Month = d.getMonth() + 1; this.Draw(); }, Draw: function() { //保存日期列表 var arr = []; //用当月第一天在一周中的日期值作为当月离第一天的天数 for(var i = 1, firstDay = new Date(this.Year, this.Month - 1, 1).getDay(); i <= firstDay; i++){ arr.push(" "); } //用当月最后一天在一个月中的日期值作为当月的天数 for(var i = 1, monthDay = new Date(this.Year, this.Month, 0).getDate(); i <= monthDay; i++){ arr.push(i); } // /var frag = document.createDocumentFragment(); this.Days = []; while(arr.length > 0){ //每个星期插入一个trvar row = document.createElement("tr"); //星期 for(var i = 1; i <= 7; i++){ var cell = document.createElement("td"); cell.innerHTML = " "; if(arr.length > 0){ var d = arr.shift(); cell.innerHTML = d; if(d > 0){ this.Days[d] = cell; //获取今日 if(this.IsSame(new Date(this.Year, this.Month - 1, d), new Date())){ this.onToday(cell); } //判断用户是否作了选择if(this.SelectDay && this.IsSame(new Date(this.Year, this.Month - 1, d), 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()); } }; </script></head><body>  <div class="Calendar"> <div id="idCalendarPre"><<</div> <div id="idCalendarNext">>></div> <span id="idCalendarYear">2008</span>年 <span id="idCalendarMonth">8</span>月 <table cellspacing="0"> <thead> <tr> <td>日</td> <td>一</td> <td>二</td> <td>三</td> <td>四</td> <td>五</td> <td>六</td> </tr> </thead> <tbody id="idCalendar"> </tbody> </table> </div> <script language="JavaScript"> var cale = new Calendar("idCalendar", { SelectDay: new Date().setDate(10), onSelectDay: function(o){ o.className = "onSelect"; }, onToday: function(o){ o.className = "onToday"; }, onFinish: function(){ $("idCalendarYear").innerHTML = this.Year; $("idCalendarMonth").innerHTML = this.Month; var flag = [10,15,20]; for(var i = 0, len = flag.length; i < len; i++){ this.Days[flag[i]].innerHTML = "" + flag[i] + ""; } } }); $("idCalendarPre").onclick = function(){ cale.PreMonth(); } $("idCalendarNext").onclick = function(){ cale.NextMonth(); } </script></body></html>

上一篇：网页上的日期台历

下一篇：Js日期选择并自动加入输入框