/******************************************************************************************* * 创建对象 var c = new Calendar("c"); document.write(c); * 调用方法 c.show(arg1,arg2,arg3) * 参数1: 文本输入框(必填). 如 onfocus="c.show(this)"; * 参数2: 按钮或其它可用单击事件的HTML元素(如果使用按钮方式则必填). 如 onclick="c.show(this,c.getObjById(*))" *=文本输入框名称 * 参数3: 如果没有文本框没有值则使用该值初始化日历(选填). 如 onfocus="c.show(this,'2006-01-01') * 注: 参数顺序不分先后. MSIE6/Opera8/FireFox1.5 下测试通过 ************************如果您使用本日历控件 请保留该信息 谢谢! *************************** * http://2lin.net * Email:caoailin@gmail.com * QQ:38062022 * Creation date: 2006-11-22 *********************************************************************************************/ function Calendar(objName) { this.style = { borderColor : "#909eff", //边框颜色 headerBackColor : "#909EFF", //表头背景颜色 headerFontColor : "#ffffff", //表头字体颜色 bodyBarBackColor : "#f4f4f4", //日历标题背景色 bodyBarFontColor : "#000000", //日历标题字体色 bodyBackColor : "#ffffff", //日历背景色 bodyFontColor : "#000000", //日历字体色 bodyHolidayFontColor : "#ff0000", //假日字体色 watermarkColor : "#d4d4d4", //背景水印色 moreDayColor : "#cccccc" }; this.showMoreDay = false; //是否显示上月和下月的日期 this.Obj = objName; this.date = null; this.mouseOffset = null; this.dateInput = null; this.timer = null; }; Calendar.prototype.toString = function() { var str = this.getStyle(); str += ''; return str; }; Calendar.prototype.getStyle = function() { var str = '\n'; return str; }; Calendar.prototype.getHeader = function() { var str = '\n'; str += '\n'; str += '\n'; str += '\n'; str += '\n'; str += '\n'; str += '\n'; str += '
<<<00>>>
\n'; return str; }; Calendar.prototype.getBody = function() { var n = 0; var str = this.getBodyBar(); str += '\n'; for(i = 0; i < 6; i++) { str += ''; for(j = 0; j < 7; j++) { str += '\n'; } str += ''; } str += '
\n'; str += '
今天:'+new Date().toFormatString("yyyy年mm月dd日")+'
\n'; return str; }; Calendar.prototype.getBodyBar = function() { var str = '\n'; var day = new Array('日','一','二','三','四','五','六'); for(i = 0; i < 7; i++) { str += '\n'; } str += '
' + day[i] + '
'; return str; } Calendar.prototype.getYearMenu = function(year) { var str = '\n'; for(i = 0; i < 10; i++) { var _year = year + i; var _date = new Date(_year,this.date.getMonth(),this.date.getDate()); str += '\n'; str += ''; } str += '\n'; str += '
' + _year + '年
\n'; str += '\n'; str += '\n'; str += '
<<>>
'; var _menu = getObjById("cdrMenu"); _menu.innerHTML = str; }; Calendar.prototype.getMonthMenu = function() { var str = '\n'; for(i = 1; i <= 12; i++) { var _date = new Date(this.date.getFullYear(),i-1,this.date.getDate()); str += '\n'; } str += '
'+i+'月
'; var _menu = getObjById("cdrMenu"); _menu.innerHTML = str; }; Calendar.prototype.show = function() { if (arguments.length > 3 || arguments.length == 0) { alert("对不起!传入参数不对!" ); return; } var _date = null; var _evObj = null; var _initValue = null for(i = 0; i < arguments.length; i++) { if(typeof(arguments[i]) == "object" && arguments[i].type == "text") {_date = arguments[i];} else if(typeof(arguments[i]) == "object") {_evObj = arguments[i];} else if(typeof(arguments[i]) == "string") {_initValue = arguments[i];} } _evObj = _evObj || _date; inputObj = _date; targetObj = _evObj if(!_date){alert("传入参数错误!"); return;} this.dateInput = _date; _date = _date.value; if(_date == "" && _initValue) _date = _initValue; this.bindDate(_date); var _target = getPosition(_evObj); var _obj = getObjById("Calendar"); _obj.style.display = ""; _obj.style.left = _target.x + 'px'; if((document.body.clientHeight - (_target.y + _evObj.clientHeight)) >= _obj.clientHeight) { _obj.style.top = (_target.y + _evObj.clientHeight) + 'px'; } else { _obj.style.top = (_target.y - _obj.clientHeight) + 'px'; } }; Calendar.prototype.hide = function() { var obj = getObjById("Calendar"); obj.style.display = "none"; }; Calendar.prototype.bindDate = function(date) { var _monthDays = new Array(31,30,31,30,31,30,31,31,30,31,30,31); var _arr = date.split('-'); var _date = new Date(_arr[0],_arr[1]-1,_arr[2]); if(isNaN(_date)) _date = new Date(); this.date = _date; this.bindHeader(); var _year = _date.getFullYear(); var _month = _date.getMonth(); var _day = 1; var _startDay = new Date(_year,_month,1).getDay(); var _previYear = _month == 0 ? _year - 1 : _year; var _previMonth = _month == 0 ? 11 : _month - 1; var _previDay = _monthDays[_previMonth]; if (_previMonth == 1) _previDay =((_previYear%4==0)&&(_previYear%100!=0)||(_previYear%400==0))?29:28; _previDay -= _startDay - 1; var _nextDay = 1; _monthDays[1] = ((_year%4==0)&&(_year%100!=0)||(_year%400==0))?29:28; for(i = 0; i < 40; i++) { var _dayElement = getObjById("cdrDay" + i); _dayElement.onmouseover = Function(this.Obj + ".onMouseOver(this)"); _dayElement.onmouseout = Function(this.Obj + ".onMouseOut(this)"); _dayElement.onclick = Function(this.Obj + ".onClick(this)"); this.onMouseOut(_dayElement); _dayElement.style.color = ""; if(i < _startDay) { //获取上一个月的日期 if(this.showMoreDay) { var _previDate = new Date(_year,_month - 1,_previDay); _dayElement.innerHTML = _previDay; _dayElement.title = _previDate.toFormatString("yyyy年mm月dd日"); _dayElement.value = _previDate.toFormatString("-"); _dayElement.style.color = this.style.moreDayColor; _previDay++; }else { _dayElement.innerHTML = ""; _dayElement.title = ""; } } else if(_day > _monthDays[_month]) { //获取下个月的日期 if(this.showMoreDay) { var _nextDate = new Date(_year,_month + 1,_nextDay); _dayElement.innerHTML = _nextDay; _dayElement.title = _nextDate.toFormatString("yyyy年mm月dd日"); _dayElement.value = _nextDate.toFormatString("-"); _dayElement.style.color = this.style.moreDayColor; _nextDay++; }else { _dayElement.innerHTML = ""; _dayElement.title = ""; } } else if(i >= new Date(_year,_month,1).getDay() && _day <= _monthDays[_month]) { //获取本月日期 _dayElement.innerHTML = _day; if(_day == _date.getDate()) { this.onMouseOver(_dayElement); _dayElement.onmouseover = Function(""); _dayElement.onmouseout = Function(""); } if(this.isHoliday(_year,_month,_day)) { _dayElement.style.color = this.style.bodyHolidayFontColor; } var _curDate = new Date(_year, _month, _day); _dayElement.title = _curDate.toFormatString("yyyy年mm月dd日"); _dayElement.value = _curDate.toFormatString("-"); _day++; } else { _dayElement.innerHTML = ""; _dayElement.title = ""; } } var _menu = getObjById("cdrMenu"); _menu.style.display = "none"; }; Calendar.prototype.bindHeader = function() { var _curYear = getObjById("currentYear"); var _curMonth = getObjById("currentMonth"); var _watermark = getObjById("cdrWatermark"); _curYear.innerHTML = this.date.toFormatString("yyyy年"); _curMonth.innerHTML = this.date.toFormatString("mm月"); _watermark.innerHTML = this.date.getFullYear(); }; Calendar.prototype.getToday = function() { var _date = new Date(); this.bindDate(_date.toFormatString("-")); }; Calendar.prototype.isHoliday = function(year,month,date) { var _date = new Date(year,month,date); return (_date.getDay() == 6 || _date.getDay() == 0); }; Calendar.prototype.onMouseOver = function(obj) { obj.className = "dayOver"; }; Calendar.prototype.onMouseOut = function(obj) { obj.className = "dayOut"; }; Calendar.prototype.onClick = function(obj) { if(obj.innerHTML != "") this.dateInput.value = obj.value; this.hide(); }; Calendar.prototype.onChangeYear = function(isnext) { var _year = this.date.getFullYear(); var _month = this.date.getMonth() + 1; var _date = this.date.getDate(); if(_year > 999 && _year <10000) { if(isnext){_year++;}else{ _year --;} } else { alert("年份超出范围(1000-9999)!"); } this.bindDate(_year + '-' + _month + '-' + _date); }; Calendar.prototype.onChangeMonth = function(isnext) { var _year = this.date.getFullYear(); var _month = this.date.getMonth() + 1; var _date = this.date.getDate(); if(isnext){ _month ++;} else {_month--;} if(_year > 999 && _year <10000) { if(_month < 1) {_month = 12; _year--;} if(_month > 12) {_month = 1; _year++;} } else { alert("年份超出范围(1000-9999)!"); } this.bindDate(_year + '-' + _month + '-' + _date); }; Calendar.prototype.showMenu = function(isyear) { var _menu = getObjById("cdrMenu"); if(isyear != null) { var _obj = (isyear)? getObjById("currentYear") : getObjById("currentMonth"); if(isyear) { this.getYearMenu(this.date.getFullYear() - 5); } else { this.getMonthMenu(); } _menu.style.top = (_obj.offsetTop + _obj.offsetHeight) + 'px'; _menu.style.left = _obj.offsetLeft + 'px'; _menu.style.width = _obj.offsetWidth + 'px'; } if (this.timer != null) clearTimeout(this.timer); _menu.style.display=""; } Calendar.prototype.hideMenu = function() { var _obj = getObjById("cdrMenu"); this.timer = window.setTimeout(function(){_obj.style.display='none';},500); } Number.prototype.NaN0 = function() { return isNaN(this) ? 0 : this; } Date.prototype.toFormatString = function(fs) { //修改日期格式为 YYYY-MM-DD var month = this.getMonth()+1; var date = this.getDate(); if(month<10){ month = "0"+month; } if(date<10){ date = "0"+date; } if(fs.length == 1) { return this.getFullYear() + fs + (month) + fs + date; } //alert(this.getMonth() + 1); fs = fs.replace("yyyy",this.getFullYear()); fs = fs.replace("mm",month); fs = fs.replace("dd",date); return fs; } /******************************************公用方法及变量********************************************************/ var inputObj = null; //输入对象 var targetObj = null; //单击目标对象 var dragObj = null; //拖动目标对象 var mouseOffset = null; //拖动目标的位置 //获取对象 function getObjById(obj) { if(document.getElementById) { return document.getElementById(obj); } else { alert("浏览器不支持!"); } } //获取鼠标位置 function mouseCoords(ev) { if(ev.pageX || ev.pageY){ return {x:ev.pageX, y:ev.pageY}; } return { x:ev.clientX + document.body.scrollLeft - document.body.clientLeft, y:ev.clientY + document.body.scrollTop - document.body.clientTop }; } //获取目标的绝对位置 function getPosition(e) { var left = 0; var top = 0; while (e.offsetParent){ left += e.offsetLeft + (e.currentStyle?(parseInt(e.currentStyle.borderLeftWidth)).NaN0():0); top += e.offsetTop + (e.currentStyle?(parseInt(e.currentStyle.borderTopWidth)).NaN0():0); e = e.offsetParent; } left += e.offsetLeft + (e.currentStyle?(parseInt(e.currentStyle.borderLeftWidth)).NaN0():0); top += e.offsetTop + (e.currentStyle?(parseInt(e.currentStyle.borderTopWidth)).NaN0():0); return {x:left, y:top}; } //获取鼠标的偏移值 function getMouseOffset(target, ev) { ev = ev || window.event; var docPos = getPosition(target); var mousePos = mouseCoords(ev); return {x:mousePos.x - docPos.x, y:mousePos.y - docPos.y}; } //关闭日历 function closeCalendar(evt){ evt = evt || window.event; var _target= evt.target || evt.srcElement; if(!_target.getAttribute("Author") && _target != inputObj && _target != targetObj) { getObjById("Calendar").style.display = "none"; } } //拖动日历开始 function dragStart(evt){ evt = evt || window.event; var _target= evt.target || evt.srcElement; if(_target.getAttribute("Author") == "alin_bar") { dragObj = getObjById("Calendar"); mouseOffset = getMouseOffset(dragObj, evt); } } //拖动日历中 function drag(evt) { evt = evt || window.event; if(dragObj) { var mousePos = mouseCoords(evt); dragObj.style.left = (mousePos.x - mouseOffset.x) + 'px'; dragObj.style.top = (mousePos.y - mouseOffset.y) + 'px'; } } //拖动结束 function dragEnd(evt) { dragObj = null; } /**********************************End 公用方法**********************************************/ document.onclick = closeCalendar; document.onmousedown = dragStart; document.onmousemove = drag; document.onmouseup = dragEnd; /*****************************************************结束************************************************************/ var cdr = new Calendar("cdr"); document.write(cdr); cdr.showMoreDay = true;