日历js插件，支持火狐(精确到天

y8820960

浏览: 115871 次
性别:
来自: 南京

最近访客更多访客>>

liuxingguome

Bsklqgy

小卒大兵

sg7067576

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
.rili { width: 196px; border:1px solid #C0D0E8; }
.rili table { 
	width: 190px;
	border: 0;
	background: #bae1f0;
}
.rili table td {  padding:2px; background: #fff; }
.time { border: 0; background: #fff; }
.time th { background: #effaff; }
.time td { text-align: center; cursor: pointer; background: #fff; }
.close { width:60px;line-height:21px;display:block;border:1px solid #bdd1ea;cursor:pointer;font-size:12px;font-weight:bold;background:#f3faff; }
span.s { width: 16px; cursor: pointer; color: #eef3f7;font-weight:bold; background:#a5b6ca; }
</style>		
		<script type="text/javascript">
			document.write("<div id=\"showDate\"  style=\"display: none;  Z-INDEX: 2; BACKGROUND: #effaff; FILTER: Alpha(opacity=85); position: absolute; WIDTH: 200px; LINE-HEIGHT: 22px; padding:6px; border: 1px solid #bae1f0; font-size:14px;\"></div>");
			
			var id;
			
			//** 此段转自于javaeye 相关链接：http://www.javaeye.com/problems/60028  **//
			//让firefox支持 event全局对象，srcElement对象   
			function __firefox(){   
			    HTMLElement.prototype.__defineGetter__("runtimeStyle", __element_style);   
			    window.constructor.prototype.__defineGetter__("event", __window_event);   
			    Event.prototype.__defineGetter__("srcElement", __event_srcElement);   
			}   
			function __element_style(){   
			    return this.style;   
			}   
			function __window_event(){   
			    return __window_event_constructor();   
			}   
			function __event_srcElement(){   
			    return this.target;   
			}   
			function __window_event_constructor(){   
			    if(document.all){   
			        return window.event;   
			    }   
			    var _caller = __window_event_constructor.caller;   
			    while(_caller!=null){   
			        var _argument = _caller.arguments[0];   
			        if(_argument){   
			            var _temp = _argument.constructor;   
			            if(_temp.toString().indexOf("Event")!=-1){   
			                return _argument;   
			            }   
			        }   
			        _caller = _caller.caller;    
			    }   
			    return null;   
			}   
			if(window.addEventListener){   
			    __firefox();   
			}
			//** 此段转自于javaeye 相关链接：http://www.javaeye.com/problems/60028  **//
			
			function showDate(ids) {
				id = ids;
				var divVal = document.getElementById("showDate");
				var clickX = event.clientX;
				var clickY = event.clientY;
				// 加px 兼容火狐
				divVal.style.left = (clickX + 1) + "px"; 
				divVal.style.top = (clickY + 1) + "px"; 
				// 得到系统日期
				var nowDate = new Date();
				selectDate(nowDate.getYear(), nowDate.getMonth());
			}
			
			// 主要函数 调用相关函数生成DIV层 显示日期
			function selectDate(nowYear, nowMonth) {
				nowYear = (nowYear < 1900 ? (1900 + nowYear) : nowYear);
				
				var showTable = "<div class=\"rili\" ><table cellpadding=0 cellspacing=0 valign=top >";
				showTable += showYear(nowYear, nowMonth);
				showTable += showWeek();
				showTable += showDates(nowYear, nowMonth);
				showTable += "<tr><td colspan=\"2\" align=\"left\"><div id=\"times\"></div></td></tr><tr><td colspan=\"2\" align=\"center\"><div  onclick=\"closeDiv()\" class=\"close\">关闭</div></td></tr></table></div></div>";
				var divVal = document.getElementById("showDate");
				divVal.innerHTML = showTable;
				divVal.style.display = "block";
			}
			
			
			function closeDiv() {
				var divVal = document.getElementById("showDate");
				divVal.style.display = "none";
			}
			
			// 输出年月
			function showYear(nowYear, nowMonth) {
				var td = "";
				td += "<tr><td><span  class=\"s\" onclick=\"preYear(" + nowYear + ", " + nowMonth + ");\">&lt;&lt;</span>";
				td += ("&nbsp;" + nowYear);
				td += "年&nbsp;";
				td += "<span class=\"s\" onclick=\"nextYear(" + nowYear + ", " + nowMonth + ");\">&gt;&gt;</span>";
				td += "</td><td><span class=\"s\" onclick=\"preMonth(" + nowYear + ", " + nowMonth + ");\">&lt;&lt;</span>&nbsp;";
				if((parseInt(nowMonth) + 1) < 10) {
					td += "0";
				}
				td += (parseInt(nowMonth) + 1);
				td += "月&nbsp;";
				td += "<span class=\"s\" onclick=\"nextMonth(" + nowYear + ", " + nowMonth + ");\">&gt;&gt;</span></td></tr>";
				return td;
			}
			
			// 输出星期
			function showWeek() {
				var week = "";
				week += "<tr><td cellpadding=\"0\" cellspacing=\"1\" colspan=\"2\"><table class=\"time\" border=\"0\"><tr >";
				week += "<th>日</th>";
				week += "<th>一</th>";
				week += "<th>二</th>";
				week += "<th>三</th>";
				week += "<th>四</th>";
				week += "<th>五</th>";
				week += "<th>六</th>";
				week += "</tr>";
				return week;
			}
			// 输出日期
			function showDates(nowYear, month) {
				var da = new Date();
				da.setYear(nowYear);
				da.setMonth(parseInt(month));
				da.setDate(1);
				var day = da.getDay();
				var dates = getDates(nowYear, month);
				var tb = "";
				var n = 0;				
				var isPrint = "";
				var k = 0;
				for(var i = 0; i < 6; i++) {
					tb += "<tr>";
					for(var j = 1; j <= 7; j++) {
						n ++;
						if(i == 0 && j <= day) {
							tb += "<td sytle=\"line-height: 16;\">&nbsp;</td>";
						} else {
							k++;
							if(k <= dates) {
								if(k == da.getDate()) {
									tb += ("<td onclick=\"getCurDate(" + nowYear + ", " + month + ", " + k + ")\"><font color=\"green\" style=\"font-weight:bold\">" + k + "</font></td>");
								} else {
									tb += ("<td onclick=\"getCurDate(" + nowYear + ", " + month + ", " + k + ")\"><font color=\"red\" style=\"font-weight:bold\">" + k + "</font></td>");
								}
							} else {
								tb += "<td sytle=\"line-height: 16;\">&nbsp;</td>";
							}
						}
					}
					tb += "</tr>";
				}
				tb += "</table></td></tr>";
				return tb;
			}
			
			// 年月操作
			function preYear(nowYearh, nowMonth) {
				selectDate(nowYearh - 1, nowMonth);
			}
			function nextYear(nowYearh, nowMonth) {
				selectDate(nowYearh + 1, nowMonth);
			}
			function preMonth(nowYearh, nowMonth) {
				if(nowMonth == 0) {
					selectDate(nowYearh - 1, 11);
				} else {
					selectDate(nowYearh, nowMonth - 1);
				}
			}
			function nextMonth(nowYearh, nowMonth) {
				if(nowMonth == 11) {
					selectDate(nowYearh + 1, 0);
				} else {
					selectDate(nowYearh, nowMonth + 1);
				}
			}
			
			// 设置
			function getCurDate(year, month, date) {
				var cMonth = "";
				var cDate = "";
				if(date < 1) {
					cDate = "1";
				} else {
					cDate = date + "";
				}
				if(date < 10) {
					cDate = "0" + date;
				}
				if(month < 10) {
					cMonth = "0" + (month + 1);
				}
				document.getElementById(id).value = year + "-" + cMonth + "-" + cDate;
				closeDiv();
			}
			// 得到日期天数
			function getDates(year, month) {
				month += 1;
				switch(month) {
				    case 2:
				          if(((year % 4) == 0 && (year % 00) != 0) ||
				          		(year % 400) == 0)
				              dates = 29; 
				          else
				              dates = 28;
				         break;
				    case 4:
				    case 6:
				    case 9:
				    case 11:
				       dates = 30;
				       break;
				   default:
				        dates = 31;
				}
				return dates;
			}
		</script>
	</head>
	<body>
	<input type="text" id="startDate" value="" onclick="showDate(this.id);" />
	</body>
</html>

分享到：