JS日历选择插件二
JS代码var Calendar = function( instanceId, language, startYear, endYear ){if( typeof instanceId == "string" ){this.Date= new Date();this.Year= this.Date.getFullYear();this.Month = this.Date.getMonth();this.Week= this.Date.getDay();this.Today= this.Date.getDate();this.InstanceId = instanceId;this.Language= language || 1;this.StartYear= startYear || this.Year - 20;this.EndYear= endYear || this.Year + 1;// If instance is input objectthis.popContainer_id ='popCalendarContainer';// Message storethis.msgStore = [];this.caleContainer_id = 'calendarContainer';this.caleTop = {today_view_id:'calendarTodayView',week_view_id:'calendarWeekView',lq_year_id:'linkQuickYear',lq_month_id:'linkQuickMonth',sq_year_id:'selectQuickYear',sq_month_id:'selectQuickMonth',close_id:'calendarClose',prev_month_id:'toPrevMonth',back_today_id:'backToday',next_month_id:'toNextMonth'}this.daysContainer_id = 'calendarDaysContainer';this.msgContainer_id = 'calendarTipsContainer';this.curDayClass = 'calendarCurrentDay';this.tipDayClass ='calendarTipDay';this.oldTipDayClass ='calendarOldTipDay';}};/* Calendar language */Calendar.lang = {weeks:[["星期天", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"],["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]], weeksMenu:[ ["日","一","二","三","四","五","六"], ["SUN","MON","TUR","WED","THU","FRI","SAT"] ]};/* Create calendar element */Calendar.prototype._getViewElement = function(){// Create page html elementvar caleElem = "";// Create StartcaleElem+= '<div id='+this.caleContainer_id+'>';// <Top>caleElem+= '<div id="calendarTopContainer"><table cellpadding="0" cellspacing="0"><tr>';// Top day viewcaleElem+= '<td id='+this.caleTop.today_view_id+'></td>';// Link or select controlcaleElem+= '<td>';caleElem+= '<div id='+this.caleTop.week_view_id+'></div>';caleElem+= '<table id="calendarYearMonthContainer" cellpadding="0" cellspacing="0">';caleElem+= '<tr>';caleElem+= '<td>';caleElem+= '<a id='+this.caleTop.lq_year_id+' href="javascript:void(0);"></a>';caleElem+= '<select id='+this.caleTop.sq_year_id+'></select>';caleElem+= '</td>';caleElem+= '<td>.</td>';caleElem+= '<td>';caleElem+= '<a id='+this.caleTop.lq_month_id+' href="javascript:void(0);"></a>';caleElem+= '<select id='+this.caleTop.sq_month_id+'></select>';caleElem+= '</td>';caleElem+= '</tr>';caleElem+= '</table>';caleElem+= '</td>';// Quick controlcaleElem+= '<td>';caleElem+= '<div id="calendarCloseContainer">';caleElem+= '<a id='+this.caleTop.close_id+' href="javascript:void(0);">x</a>';caleElem+= '</div>';caleElem+= '<div id="calendarQuickContainer">';caleElem+= '<a id='+this.caleTop.prev_month_id+' href="javascript:void(0);">&laquo;</a>';caleElem+= '<a id='+this.caleTop.back_today_id+' href="javascript:void(0);">&nbsp;</a>';caleElem+= '<a id='+this.caleTop.next_month_id+' href="javascript:void(0);">&raquo;</a>';caleElem+= '</div>';caleElem+= '</td>';caleElem+= '</tr></table cellpadding="0" cellspacing="0"></div>';// </Top>// <Calendar View>caleElem+= '<div id="calendarMainContainer">';// Week menucaleElem+= '<div id="calendarWeeksContainer">';for(var i = 0; i < 7; i ++){caleElem+= '<span>'+Calendar.lang["weeksMenu"]+'</span>';}caleElem+= '</div>';// Days viewcaleElem+= '<table id='+this.daysContainer_id+' cellpadding="0" cellspacing="0">';for(var tr = 0; tr < 6; tr ++){caleElem+= '<tr>';for(var td = 0; td < 7; td ++){caleElem+= '<td><span></span></td>';}caleElem+= '</tr>';}caleElem+= '</table>';caleElem+= '</div>';// </Calendar View>caleElem+= '</div>';caleElem+= '<div id='+this.msgContainer_id+'></div>';return caleElem;};/* Get Month Data */Calendar.prototype._getMonthViewArray = function( year, month ){var monthArray = [];// From the beginning day of the weekvar beginDayOfWeek = new Date( year, month, 1).getDay();// This month total daysvar daysOfMonth = new Date( year, month + 1, 0).getDate();// 42: 7*6 matrix for( var i = 0; i < 42; i ++ )monthArray = "&nbsp;";for( var j = 0; j < daysOfMonth; j ++ )monthArray = j + 1 ;return monthArray;};/* Search the index of option in the select */Calendar.prototype._getOptionIndex = function( selectObject, value ){for( var j = 0; j < selectObject.options.length; j ++ ){if( value == selectObject.options.value )return j;}};/* Bind year data into 'Year select' */Calendar.prototype._bindYearIntoSelect = function(){var oYear = this.find( this.caleTop.sq_year_id );var oYearLen = 0;for( var i = this.StartYear; i <= this.EndYear; i ++, oYearLen ++ )oYear.options = new Option( i , i );};/* Bind Month data into 'Month select' */Calendar.prototype._bindMonthIntoSelect = function(){var oMonth = this.find( this.caleTop.sq_month_id );var oMonthLen = 0;for( var i = 0; i < 12; i ++, oMonthLen ++ )oMonth.options = new Option( i + 1 , i + 1 );};/* Bind data */Calendar.prototype._bindAllData = function( curYear, curMonth ){var cr = this;// Bind default Data into 'select:Year' this._bindYearIntoSelect();// Bind default Data into 'select:Month' this._bindMonthIntoSelect(); // Change the 'select:Year' and 'select:Month' value this.changeSelectValue( curYear, curMonth );// Bind default data into 'current day view and current week view'this.find( this.caleTop.week_view_id ).innerHTML= Calendar.lang['weeks'];this.find( this.caleTop.today_view_id ).innerHTML = this.Today;// Get days and bind into 'CalendarMain'// Add current day class and mouse event var daysOfMonthArray = this._getMonthViewArray( curYear, curMonth );var spans = this.find( this.daysContainer_id, "span" );var curYMD = this.Year + "" + ( this.Month + 1 ) + "" + this.Today;var selectYear= this.find( this.caleTop.sq_year_id ).value;var selectMonth = this.find( this.caleTop.sq_month_id ).value;for( var i = 0; i < spans.length; i ++ ){spans.innerHTML = daysOfMonthArray;var selectYMD = selectYear + "" + selectMonth + "" + spans.innerHTML;if( curYMD == selectYMD )spans.className = this.curDayClass;elsespans.className = "";}// If not some days has pop messageif( this.msgStore != "" )this._initPopMsg( this.msgStore );}/* Bind event */Calendar.prototype._bindAllEvent = function(){var cr = this;// 'toPrevMonth, toNextMonth, backToday, today view' eventthis.find( this.caleTop.prev_month_id ).onclick = function(){ cr.goPrevOrNextMonth(this); };this.find( this.caleTop.next_month_id ).onclick = function(){ cr.goPrevOrNextMonth(this); };this.find( this.caleTop.back_today_id ).onclick= function(){ cr.backToday(); };this.find( this.caleTop.today_view_id ).onclick = function(){ cr.backToday(); };// 'year and month select' onchange eventthis.find( this.caleTop.sq_year_id ).onchange = function(){ cr.updateSelect(); };this.find( this.caleTop.sq_month_id ).onchange= function(){ cr.updateSelect(); };// Quick link eventthis.find( this.caleTop.lq_year_id ).onclick= function(){ cr.showHide( cr.caleTop.lq_year_id, "none" );cr.showHide( cr.caleTop.sq_year_id, "block" );};this.find( this.caleTop.lq_month_id ).onclick = function(){ cr.showHide( cr.caleTop.lq_month_id, "none" );cr.showHide( cr.caleTop.sq_month_id, "block" );};// Remove the link dotted linevar oLink = this.find( this.caleContainer_id, "a" )for( var i = 0; i < oLink.length; i ++ ){oLink.onfocus= function(){ this.blur(); }}}/* Bind calendar for calendar view */Calendar.prototype._initCalendar = function(){this._bindAllEvent();this._bindAllData( this.Year, this.Month );};/* Change the quick select value */Calendar.prototype.changeSelectValue = function( year, month ){var ymArray = [], selectArray = [], linkArray = [];// Store the 'year' and 'month' to ArrayymArray = year; ymArray = month + 1;// Store the 'selectYear_id' and 'selectMonth_id' to ArrayselectArray = this.caleTop.sq_year_id; selectArray = this.caleTop.sq_month_id;linkArray = this.caleTop.lq_year_id; linkArray = this.caleTop.lq_month_id;for( var i = 0; i < selectArray.length; i ++ ){var selectObject = this.find( selectArray );// Get the return indexvar index = this._getOptionIndex( selectObject, ymArray );// Reset the 'year', 'month' select and link valueselectObject.options.selected = "selected";this.find( linkArray ).innerHTML = selectObject.value;}this.resetLinkSelect();};/* Search next or previons month */Calendar.prototype.goPrevOrNextMonth = function( obj ){var curMonthSelect = this.find( this.caleTop.sq_month_id );var curMonth = parseInt( curMonthSelect.value );var curYear= this.find( this.caleTop.sq_year_id ).value;// If 'next' get current month select + 1// If 'prev' get current month select - 1if( obj.id == this.caleTop.next_month_id )curMonthSelect.value = curMonth + 1;elsecurMonthSelect.value = curMonth - 1;var getNowMonth = curMonthSelect.value - 1;if( getNowMonth == -1 && curMonth == 1) getNowMonth = 0;if( getNowMonth == -1 && curMonth == 12 ) getNowMonth = 11;this._bindAllData( curYear, getNowMonth );};/* If 'select:Year' and 'select:Month' change value update data*/Calendar.prototype.updateSelect = function(){var yearSelectValue = this.find( this.caleTop.sq_year_id ).value;var monthSelectValue = this.find( this.caleTop.sq_month_id ).value;// Re-bind Panel Datathis._bindAllData( yearSelectValue, monthSelectValue - 1 );};/* Back to taday: re-load '_bindAllData()' */Calendar.prototype.backToday = function(){this._bindAllData( this.Year, this.Month );};/* Find the instance object or children of instance object by Id */Calendar.prototype.find = function( elemId, childTag ){if( !childTag )// Return: objectreturn document.getElementById( elemId );else// Return: object arrayreturn this.find( elemId ).getElementsByTagName( childTag );};/* Set element css */Calendar.prototype.css = function( oId, selector ){var o = this.find( oId ); selector['left']?o.style.left = selector['left']:""; selector['top']?o.style.top= selector['top']:""; selector['position']? o.style.position = selector['position']:"";}/* Check calendar show or hidden */Calendar.prototype.showHide = function( objectId, dis ){return this.find( objectId ).style.display = dis;};/* Init the top quick menu link and select */Calendar.prototype.resetLinkSelect = function(){this.showHide( this.caleTop.sq_year_id, "none" );this.showHide( this.caleTop.sq_month_id, "none" );this.showHide( this.caleTop.lq_year_id, "block" );this.showHide( this.caleTop.lq_month_id, "block" );};/* Put this calendar into the html of instance */Calendar.prototype.show = function( msgData ){var obj = this.find( this.InstanceId );if( obj ){obj.innerHTML = this._getViewElement();// Init calendar event and datathis._initCalendar();// This function don't have 'close'this.showHide( this.caleTop.close_id, "none" );if( typeof msgData == 'object'){this.msgStore = msgData;this._initPopMsg( this.msgStore );}}};/* Init pop message */Calendar.prototype._initPopMsg = function(){var cr = this;var selectYear= this.find( this.caleTop.sq_year_id ).value;var selectMonth = this.find( this.caleTop.sq_month_id ).value;var daysOfMonthArray = this._getMonthViewArray( selectYear, selectMonth );var spans = this.find( this.daysContainer_id, "span" );for( var key in this.msgStore ){var keyMD = key.substring( 4 );var keyY= key.substring( 0, 4 );for( var i = 0; i < spans.length; i ++){var getMD = selectMonth + "" + spans.innerHTML;if( getMD == keyMD ){if( selectYear == keyY )spans.className = this.tipDayClass +" "+ keyY;elsespans.className = this.oldTipDayClass +" "+ keyY;spans.onmouseover = function(){var hoverDate = this.className.split(" ") + "" + selectMonth + "" + this.innerHTML;var y = this.className.split(" "),m = selectMonth,d = this.innerHTML;cr.find( cr.msgContainer_id ).innerHTML = cr._getMsgHtml( y, m, d );cr.showHide( cr.msgContainer_id, "block" );}}}}cr.find( cr.caleContainer_id ).onmouseout = function(){cr.showHide( cr.msgContainer_id, "none" );}};/* Get message */Calendar.prototype._getMsgHtml =function( y, m, d ){var date = y + m + d;var showDate = y + "-" + m + "-" + d;var msgHtml = '<div>'+showDate+':</div><div>'+ this.msgStore +'</div>';return msgHtml;}/* Pop-up the calendar */Calendar.prototype.pop = function(){var cr = this;var obj= this.find( this.InstanceId );if( obj ){// Instance object click then pop-up the calendarobj.onclick = function( e ){var e = window.event || e;var x= e.x || e.pageX,y= e.y || e.pageY;if( !cr.find( cr.popContainer_id ) ){// Create the pop-up divvar oDiv = document.createElement("div");oDiv.id= cr.popContainer_id;document.body.appendChild( oDiv );}else{cr.showHide( cr.popContainer_id, "block" );}cr.find( cr.popContainer_id ).innerHTML = cr._getViewElement();// Init calendar event and datacr._initCalendar();// Set days click eventcr.popDaysClickEvent( obj );// Set positioncr.css( cr.popContainer_id, {position: "absolute", left: x + "px", top: y + "px"});// Close panel eventcr.find( cr.caleTop.close_id ).onclick = function(){ cr.showHide( cr.popContainer_id, "none" ); };};}};/* Click the pop calendar days event */Calendar.prototype.popDaysClickEvent = function( obj ){var cr = this;var spans = cr.find( cr.daysContainer_id, "span" );for( var i = 0; i < spans.length; i ++ )spans.onclick = function(){if( this.innerHTML != "&nbsp;" ){var getYear = cr.find( cr.caleTop.sq_year_id ).value;var getMonth = cr.find( cr.caleTop.sq_month_id ).value;obj.value = getYear +"-"+ getMonth +"-" + this.innerHTML;cr.showHide( cr.popContainer_id, "none" );}}}; JSP代码<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%String path = request.getContextPath();String basePath = request.getScheme() + "://"+ request.getServerName() + ":" + request.getServerPort()+ path + "/";%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><base href="<%=basePath%>"><title>日历选择插件(IE和火狐都行)</title><meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" content="no-cache"><meta http-equiv="expires" content="0"><meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="This is my page"><script type="text/javascript" src="calendar2.js"></script><link rel="stylesheet" type="text/css" href="calendar.css"></link><script type="text/javascript">window.onload = function() {var cr = new Calendar("t");cr.pop();}</script><style type="text/css">body,ul {margin: 0;padding: 0;list-style-type: none;}</style></head><body><form action="" method=post><table><tr><td><div id="c" style="padding: 50px;"><input id="t"></div></td></tr></table></form></div></body></html> CSS代码#calendarTopContainer tr td{vertical-align: top;}#popCalendarContainer{opacity: 0.88;filter: alpha(opacity=88);}#calendarContainer{font: normal 12px arial, helvetica, sans-serif;border: #1D99C9 1px solid;width: 210px;display: block;}/* top */#calendarTopContainer{width: 210px;height: 36px;background-color: #33B1E1;overflow: hidden;}#calendarTodayView{font: bold 32px arial, helvetica, sans-serif;color: #FFF;width: 60px;height: 36px;text-align: center;cursor: pointer;}#calendarDateView{width: 100px;height: 36px;}#calendarWeekView,#calendarYearMonthContainer{font: normal 12px arial, helvetica, sans-serif;height: 18px;overflow: hidden;color: #FFF;}#calendarWeekView{width: 100px;height: 14px;padding-top: 4px;text-indent: 3px;*height: 18px;*padding-top: 5px;}#linkQuickYear,#linkQuickMonth{padding: 0 3px;height: 18px;line-height: 18px;text-decoration: none;color: #FFF;}#linkQuickYear:hover,#linkQuickMonth:hover{color: #FFFF80;}#calendarYearMonthContainer select{font: normal 12px arial, helvetica, sans-serif;color: #FFF;border: #33B1E1 1px solid;display: none;background-color: #33B1E1;}/* Modeify By http://www.codefans.net */#calendarCloseContainer,calendarQuickContainer{height: 18px;}#calendarCloseContainer{width: 47px;height: 12px;margin-top: 3px;}#calendarClose{font: bold 14px arial, helvetica, sans-serif;width: 12px;height: 12px;line-height: 10px;color: #FFF;background: #1D9BCB;border: #7DDAFB 1px solid;text-align: center;float: right;display: block;text-decoration: none;*padding: 0 2px 2px 2px;}#calendarClose:hover{color: #7DDAFB;}#calendarQuickContainer{height: 10px;margin-top: 4px;float: right;}#toPrevMonth,#toNextMonth,#backToday{font: bold 14px arial, helvetica, sans-serif;float: left;width: 8px;height: 10px;line-height: 10px;font-size: 14px;color: #FFF;overflow: hidden;display: block;_display: inline;}#backToday{height: 8px;margin: 3px 8px 0 8px;background: #fff;}#toPrevMonth:hover,#toNextMonth:hover{color: #D9E4F2;}#backToday:hover{background-color: #D9E4F2;}/* Main */#calendarMainContainer{width: 210px;background-color: #FFF;}#calendarWeeksContainer{height: 20px;background-color: #D9E4F2;border-bottom: #1D99C9 1px solid;border-top: #1D99C9 1px solid;}#calendarWeeksContainer span{width: 30px;height: 20px;color: #003366;text-align: center;display: inline-block;padding-top: 3px;}#calendarDaysContainer tr td{width: 30px;height: 20px;text-align: center;cursor: text;font: normal 12px arial, helvetica, sans-serif;overflow: hidden;}#calendarDaysContainer tr td span{cursor: default;display: block;_text-align: center;}#calendarTipsContainer{position: absolute;display: none;overflow: hidden;width: 198px;padding: 3px 6px;line-height: 18px;font: normal 12px arial, helvetica, sans-serif;background-color: #f7f7f7;color: #666;border: #1D99C9 1px solid;border-top-style: none;*width: 212px;}/* current day, has tip days style */.calendarCurrentDay{font-weight: bold;border: #cb0000 1px solid;background-color: #FF0000;color: #FFF;}.calendarTipDay{border: #999 1px solid;background-color: #FFFFDD;color: #666;}.calendarOldTipDay{border: #ccc 1px solid;background-color: #f7f7f7;color: #888;} 效果http://dl.iteye.com/upload/attachment/351607/f9f18d5e-3e7c-389a-be95-bfc65d0814fe.jpg
页:
[1]