<!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-Language" content="zh-cn" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JCalendar 日历控件 v1.0 beta</title>
<style type="text/css">
body {
font-size:12px;
font-family:'Lucida Grande','Lucida Sans Unicode','宋体',arial,verdana,sans-serif;
}
input,select{
border:1px solid #369;
font-size:12px;
margin:0 5px;
}
input {
width:180px;
}
fieldset {
margin:5px;
padding:0 12px 12px 12px;
border:1px solid #D4D4D4;
background-color:#F9F9F9;
}
legend {
font-weight:bold;
}
.center {
text-align:center;
}
.red {
color:#F00;
}
/**********日历样式开始********************/
</style>
<script type="text/javascript" defer="defer">
//////////////////基本函数库/////////////////////////////
var isIE = /msie/i.test(navigator.userAgent);
var isDTD = /CSS1Compat/i.test(document.compatMode);
if(!isIE){
window.constructor.prototype.__defineGetter__("event",function(){
var func = arguments.callee.caller;
while(func != null){
var arg0 = func.arguments[0];
if(arg0 && (arg0.constructor==Event || arg0.constructor ==MouseEvent)){
return arg0;
}
func = func.caller;
}
return null;
});
Event.prototype.__defineSetter__("returnValue",function(b){
if(!b)this.preventDefault();
return b;
});
Event.prototype.__defineGetter__("srcElement",function(){
var node=this.target;
while(node.nodeType != 1)node=node.parentNode;
return node;
});
Event.prototype.__defineGetter__("offsetX",function(){
return this.layerX;
});
Event.prototype.__defineGetter__("offsetY",function(){
return this.layerY;
});
HTMLElement.prototype.attachEvent = function(sType,foo){
this.addEventListener(sType.slice(2),foo,false);
}
HTMLElement.prototype.detachEvent = function(sType,foo){
this.removeEventListener(sType.slice(2),foo,false);
}
HTMLDocument.prototype.attachEvent = function(sType,foo){
this.addEventListener(sType.slice(2),foo,false);
}
HTMLDocument.prototype.detachEvent = function(sType,foo){
this.removeEventListener(sType.slice(2),foo,false);
}
HTMLElement.prototype.__defineGetter__("innerText",function(){
return this.textContent;
});
HTMLElement.prototype.__defineSetter__("innerText",function(str){
this.textContent = str;
});
}
else document.execCommand("BackgroundImageCache",false,true);
function $(id){return (typeof id == "string" ? document.getElementById(id) : id);}
function $N(name){return document.getElementsByName(name);}
function $TN(name,root){return root ? $(root).getElementsByTagName(name) : document.getElementsByTagName(name);}
function $DC(name){return document.createElement(name);}
function exist(id){return $(id)!= null;}
function hide(){
for(var i = 0; i < arguments.length; i++){
if(exist(arguments[i])){
if($(arguments[i]).style.visibility) $(arguments[i]).style.visibility = "hidden";
else $(arguments[i]).style.display = "none";
}
}
}
function show(){
for(var i = 0; i < arguments.length; i++){
if(exist(arguments[i])){
if($(arguments[i]).style.visibility) $(arguments[i]).style.visibility="visible";
else $(arguments[i]).style.display = "";
}
}
}
</script>
<script type="text/javascript" defer="defer">
//////////////JCalendar 类////////////////////////////
/***************************
*JCalendar日历控件
*@author brull
*@email [email]brull@163.com[/email]
*@date 2007-4-16
*@更新 2007-5-27
*@version 1.0 beta
***************************/
/*
*@param year 年份,[可选]
*@param month 月份，[可选]
*@param date 日期，[可选]
*或者是以横线间隔开的日期，比如：2007-4-27
*/
function JCalendar (year,month,date) {
if($("calendar"))return;//唯一实例
var _date = null;
if(arguments.length == 3) _date = new Date(year,month-1,date);
else if(arguments.length == 1 && typeof arguments[0] == "string")
_date = eval("new Date(" + arguments[0].split("-").join() + ")");
//如果没有参数，就初始化为当天日期
else if(arguments.length == 0) _date = new Date();
this.year = _date.getFullYear();
this.month = _date.getMonth() + 1;
this.date = _date.getDate();
this.FIRSTYEAR = 1949;
this.LASTYEAR = 2049;
JCalendar.cur_year = this.year;
JCalendar.cur_month = this.month;
JCalendar.cur_date = this.date;
JCalendar.cur_obj_id = null;//作为输入控件时保存当前文本框的id
}
/**
*设置日历年份下拉菜单的年份范围
*@first 第一个年份界限
*@last 第二个年份界限
*两个参数顺序可以颠倒
*/
JCalendar.prototype.setYears = function(first,last){
if(isNaN(first) || isNaN(last)) return;
this.FIRSTYEAR = Math.min(first,last);
this.LASTYEAR = Math.max(first,last);
}
/**
*以HTML串返回日历控件的HTML代码
*/
JCalendar.prototype.toString = function(){
var fday = new Date(this.year,this.month-1,1).getDay();//每月第一天的星期数
var select_year = new Array();//年份下拉菜单
var select_month = new Array();//月份下拉菜单
//日历里的每个单元格的数据，预先定义一段空数组，对应日历里第一周空的位置。[注意星期天对应的数是0]
var date = new Array(fday > 0 ? fday - 1 : 0);
var dayNum = new Date(this.year,this.month,0).getDate();//每月的天数
var html_str = new Array();//保存日历控件的HTML代码
var date_index = 0;//date数组的索引
var weekDay = ["日","一","二","三","四","五","六"];
//填充年份下拉菜单
select_year.push("<select id='select_year' style='display:none' onblur =\"hide(this);show('title_year')\" onchange='JCalendar.update(this.value,JCalendar.cur_month)'>");
for(var i = this.FIRSTYEAR; i <= this.LASTYEAR; i++){
if(i == this.year)
select_year.push("<option value='" + i + "' selected='selected'>" + i +"</option>");
else
select_year.push("<option value='" + i + "'>" + i +"</option>");
}
select_year.push("</select>");
//填充月份下拉菜单
select_month.push("<select id='select_month' style='display:none' onblur =\"hide(this);show('title_month')\" onchange='JCalendar.update(JCalendar.cur_year,this.value)'>");
for(var i = 1; i <= 12; i++){
if(i == this.month)
select_month.push("<option value='" + i + "' selected='selected'>" + i +"月</option>");
else
select_month.push("<option value='" + i + "'>" + i +"月</option>");
}
select_month.push("</select>");
//初始化date数组
for(var j = 1; j <= dayNum; j++){
date.push(j);
}
//开始构建日历控件的HTML代码
html_str.push("<table id='calendar'>");
//日历表格caption
html_str.push("<caption>" + "<a href='#' id='prev_month' title='上一月份' onclick=\"JCalendar.update(JCalendar.cur_year,JCalendar.cur_month-1);return false;\">«</a><a href='#' id='title_year' title='点击选择年份' onclick=\"hide(this);show('select_year');$('select_year').focus();return false\">" + this.year + "年</a>" + select_year.join("") + "<a href='#' id='title_month' title='点击选择月份' onclick=\"hide(this);show('select_month');$('select_month').focus();return false\">" + this.month + "月</a>" + select_month.join("") + "<a href='#' id='next_month' title='下一月份' onclick=\"JCalendar.update(JCalendar.cur_year,JCalendar.cur_month+1);return false;\">»</a></caption>");
//日历表格头
html_str.push("<thead><tr>");
for(var i = 0; i < 7; i++){//填充日历头
html_str.push("<td>" + weekDay[i] + "</td>");
}
html_str.push("</tr></thead>");
//日历主体
var tmp;
html_str.push("<tbody>");
for(var i = 0; i < 6; i++){//填充日期，6行7列
html_str.push("<tr>");
for(var j = 0; j < 7; j++){
tmp = date[date_index++];
if(!tmp) tmp = "";
评论26
最新资源