calendar.js

js的一个日期控件



var fixedX = -1;
var fixedY = -1;
var startAt = 1;
var showWeekNumber = 0;
var showToday = 1;
var imgDir = "./images/";

var strGoToCurrentMonth = "Go To Current Month";
var strTodayIs = "Today Is";
var strWeek    = "Wk";
var strScrollLeftMessage = "Click to scroll to previous month. Hold mouse button to scroll automatically.";
var strScrollRightMessage = "Click to scroll to next month. Hold mouse button to scroll automatically.";
var strSelectMonthMessage = "Click to select a month.";
var strSelectYearMessage = "Click to select a year.";
var strSelectDateMessage = "Select [date] as date.";

var gotoString = "Go To Current Month";
var todayString = "今天是";
var weekString = "Wk";
var scrollLeftMessage = "Click to scroll to previous month. Hold mouse button to scroll automatically.";
var scrollRightMessage = "Click to scroll to next month. Hold mouse button to scroll automatically.";
var selectMonthMessage = "Click to select a month.";
var selectYearMessage = "Click to select a year.";
var selectDateMessage = "Select [date] as date.";

var crossobj;
var crossMonthObj;
var crossYearObj;
var monthSelected;
var yearSelected;
var dateSelected;
var omonthSelected;
var oyearSelected;
var odateSelected;
var monthConstructed;
var yearConstructed;
var intervalID1;
var intervalID2;
var timeoutID1;
var timeoutID2;
var ctlToPlaceValue;
var ctlNow;
var dateFormat;
var nStartingYear;

var bPageLoaded=false;
var ie=document.all;
var dom=document.getElementById;

var ns4=document.layers;
var today = new Date();
var dateNow = today.getDate();
var monthNow = today.getMonth();
var yearNow = today.getYear();
var imgsrc = new Array();
imgsrc[0]="drop1.gif";
imgsrc[1]="drop2.gif";
imgsrc[2]="left1.gif";
imgsrc[3]="left2.gif";
imgsrc[4]="right1.gif";
imgsrc[5]="right2.gif";
imgsrc[6]="close.gif";

var img = new Array();

var stackCalHid = new Array();
var stackMonthHid = new Array();

var bShow = false;

/* hides objects (for IE only) */
function hideElement( elmID, overDiv, stack )
{
	     var intMSIEStart = parseInt(navigator.appVersion.indexOf("MSIE")) + 5;
	     var IntMSIEEnd = parseInt(navigator.appVersion.indexOf("MSIE")) + 6;
	     var IntIEVersion = navigator.appVersion.substring(intMSIEStart,IntMSIEEnd);

if(IntIEVersion == 5)
{
	alert("please upgrade your IE to version 6.0 for better use calendar!");
}
else
{
  if( ie )
  {
    for( i = 0; i < document.all.tags( elmID ).length; i++ )
    {
      obj = document.all.tags( elmID )[i];
      if( !obj || !obj.offsetParent )
      {
        continue;
      }

      objLeft   = obj.offsetLeft;
      objTop    = obj.offsetTop;
      objParent = obj.offsetParent;

      while( objParent.tagName.toUpperCase() != "BODY" )
      {
        objLeft  += objParent.offsetLeft;
        objTop   += objParent.offsetTop;
        objParent = objParent.offsetParent;
      }

      objHeight = obj.offsetHeight;
      objWidth = obj.offsetWidth;

      if((overDiv.offsetLeft+overDiv.offsetWidth)<=objLeft);
      else if((overDiv.offsetTop+overDiv.offsetHeight)<=objTop);
      else if(overDiv.offsetTop>=(objTop+objHeight));
      else if(overDiv.offsetLeft>=(objLeft+objWidth));
      else
      {
			if( obj.style.visibility != "hidden" ){
				stack.push(obj);
				obj.style.visibility = "hidden";
			}
      }
    }
  }

}


}

/*
* unhides objects (for IE only)
*/
function showElement( stack )
{
 var intMSIEStart = parseInt(navigator.appVersion.indexOf("MSIE")) + 5;
var IntMSIEEnd = parseInt(navigator.appVersion.indexOf("MSIE")) + 6;
var IntIEVersion = navigator.appVersion.substring(intMSIEStart,IntMSIEEnd);

if(IntIEVersion == 5)
{
	
}
else
{


	//comment by allen for use in ie5.0
	if( ie )
	{
		var obj = stack.pop();
		while(obj){
			obj.style.visibility = "";
			obj = stack.pop();
		}
	}
}

}

function HolidayRec (d, m, y, desc)
{
    this.d = d;
    this.m = m;
    this.y = y;
    this.desc = desc;
}

var HolidaysCounter = 0;
var Holidays = new Array();

function addHoliday (d, m, y, desc)
{
    Holidays[HolidaysCounter++]=new HolidayRec(d,m,y,desc);
}

if (dom)
{
    for    (i=0;i<imgsrc.length;i++)
    {
        img[i] = new Image;
        img[i].src = imgDir + imgsrc[i];
    }
    //controls style of whole table
    document.write("\n<div onclick='bShow=true' id='calendar' ");
    document.write("style='z-index:+999;position:absolute;visibility:hidden;'>");
    document.write("\n<table width="+((showWeekNumber==1)?250:220));
    document.write(" style='font-family:arial;font-size:11px;border-width:1;");
    document.write(" border-style:solid;border-color:#a0a0a0;font-family:arial;");
    document.write(" font-size:11px}' bgcolor='#ffffff'>");
    document.write("\n<tr bgcolor='#0000aa'>");
    document.write("\n<td>");
    document.write("\n<table width='"+((showWeekNumber==1)?248:218)+"'>");
    document.write("\n<tr>");
    document.write("\n<td style='padding:2px;font-family:arial;font-size:11px;'>");
    document.write("\n<font color='#ffffff'><B><span id='caption'></span>");
    document.write("</B></font></td>");
    document.write("\n<td align=right>");
    document.write("\n<a href='javascript:hideCalendar()'>");
    document.write("\n<IMG SRC='"+imgDir+"close.gif' WIDTH='15' HEIGHT='13' ");
    document.write("BORDER='0' ALT='Close the Calendar'></a></td>");
    document.write("\n</tr>");
    document.write("\n</table></td>");
    document.write("\n</tr>");
    document.write("\n<tr>");
    document.write("\n<td style='padding:5px' bgcolor=#ffffff>");
    document.write("\n<span id='content'></span></td>");
    document.write("\n</tr>");

    if (showToday==1)
    {
        document.write("\n<tr bgcolor=#cccccc>");
        document.write("\n<td style='padding:5px' align=center>");
        document.write("\n<span id='lblToday'></span></td>");
        document.write("\n</tr>");
    }

    document.write("\n</table></div>");
    document.write("\n<div id='selectMonth' ");
    document.write("style='z-index:+1999;");
    document.write("position:absolute;visibility:hidden;'>");
    document.write("</div><div id='selectYear' ");
    document.write("style='z-index:+999;");
    document.write("position:absolute;visibility:hidden;'></div>");
}

var monthName = new Array()
//monthName[0]="January";
//monthName[1]="February";
//monthName[2]="March";
//monthName[3]="April";
//monthName[4]="May";
//monthName[5]="June";
//monthName[6]="July";
//monthName[7]="August";
//monthName[8]="September";
//monthName[9]="October";
//monthName[10]="November";
//monthName[11]="December";

monthName[0]="1月";
monthName[1]="2月";
monthName[2]="3月";
monthName[3]="4月";
monthName[4]="5月";
monthName[5]="6月";
monthName[6]="7月";
monthName[7]="8月";
monthName[8]="9月";
monthName[9]="10月";
monthName[10]="11月";
monthName[11]="12月";


dayName = new Array()
dayName[0]="日";
dayName[1]="一";
dayName[2]="二";
dayName[3]="三";
dayName[4]="四";
dayName[5]="五";
dayName[6]="六";

//dayName[0]="Sun";
//dayName[1]="Mon";
//dayName[2]="Tue";
//dayName[3]="Wed";
//dayName[4]="Thu";
//dayName[5]="Fri";
//dayName[6]="Sat";

if (startAt!=1)
{
    for(i=0; i<6; i++)
    {
        dayName[i]=dayName[i+1]
    }
    dayName[6]="Sun";

}

//This is the style info for the physical date numbers
var styleAnchor="text-decoration:none;color:black;cursor:hand;font-size:11px;";

var styleLightBorder="border-style:solid;border-width:1px;border-color:#0000aa;";
styleLightBorder+="background-color:#FFFFFF;color:#0000aa;font-weight:bolder;"

function swapImage(srcImg, destImg){
    if (ie)    { document.getElementById(srcImg).setAttribute("src",imgDir + destImg) }
}

function init()    {
    if (!ns4)
    {
        if (!ie) {
            yearNow += 1900;
        }

        if(dom){
            crossobj=document.getElementById("calendar").style
            hideCalendar();
            crossMonthObj=document.getElementById("selectMonth").style
            crossYearObj=document.getElementById("selectYear").style
        } else {
            crossobj=(ie? document.all.calendar : document.calendar)
            hideCalendar();
            crossMonthObj=(ie? document.all.selectMonth : document.selectMonth)
            crossYearObj=(ie? document.all.selectYear : document.selectYear);
        }

        monthConstructed=false;
        yearConstructed=false;

        //This controls the Today is portion
        if (showToday==1)
        {
            var lblToday = document.getElementById("lblToday");
            var lblTodayString = "";
            lblTodayString=" <a onmousemove='window.status=\""+gotoString+"\"' ";
            lblTodayString+="onmouseout='window.status=\"\"' ";
            lblTodayString+="title='"+gotoString+"' style='"+styleAnchor+"' ";
            lblTodayString+="href='javascript:monthSelected=monthNow;";
            lblTodayString+="yearSelected=yearNow;constructCalendar();'>";
            lblTodayString+=todayString+" 星期";
            lblTodayString+=dayName[(today.getDay()-startAt==-1)?6:(today.getDay())];
            lblTodayString+=", " + monthName[monthNow].substring(0,3)/* + " "*/;
            lblTodayString+=dateNow + "日, " +    yearNow    + "年"+ "</a>";
            lblToday.innerHTML=lblTodayString;
        }

        //This is for the color control on the top table
        sHTML1="<span id='spanLeft'    style='border-style:solid;border-width:1;";
        sHTML1+="border-color:#3366FF;cursor:hand' ";
        sHTML1+="onmouseover='swapImage(\"changeLeft\",\"left2.gif\");";
        sHTML1+="this.style.borderColor=\"#88AAFF\";";
        sHTML1+="window.status=\""+scrollLeftMessage+"\"' ";
        sHTML1+="onclick='javascript:decMonth()' ";
        sHTML1+="onmouseout='clearInterval(intervalID1);";
        sHTML1+="swapImage(\"changeLeft\",\"left1.gif\");";
        sHTML1+="this.style.borderColor=\"#3366FF\";";
        sHTML1+="window.status=\"\"' ";
        sHTML1+="onmousedown='clearTimeout(timeoutID1);";
        sHTML1+="timeoutID1=setTimeout(\"StartDecMonth()\",500)'";
        sHTML1+="onmouseup='clearTimeout(timeoutID1);";
        sHTML1+="clearInterval(intervalID1)'>";
        sHTML1+="&nbsp<IMG id='changeLeft' SRC='"+imgDir+"left1.gif' ";
        sHTML1+="width=10 height=11 BORDER=0>&nbsp</span>&nbsp;";

        // After meeting
        sHTML1+="<span id='spanRight' style='border-style:solid;border-width:1;";
        sHTML1+="border-color:#3366FF;cursor:hand' ";
        sHTML1+="onmouseover='swapImage(\"changeRight\",\"right2.gif\");";
        sHTML1+="this.style.borderColor=\"#88AAFF\";";
        sHTML1+="window.status=\""+scrollRightMessage+"\"'";
        sHTML1+="onmouseout='clearInterval(intervalID1);";
        sHTML1+="swapImage(\"changeRight\",\"right1.gif\");";
        sHTML1+="this.style.borderColor=\"#3366FF\";window.status=\"\"' ";
        sHTML1+="onclick='incMonth()' onmousedown='clearTimeout(timeoutID1);";
        sHTML1+="timeoutID1=setTimeout(\"StartIncMonth()\",500)' ";
        sHTML1+="onmouseup='clearTimeout(timeoutID1);clearInterval(intervalID1)'>";
        sHTML1+="&nbsp<IMG id='changeRight' ";
        sHTML1+="SRC='"+imgDir+"right1.gif' width=10 height=11 BORDER=0>&nbsp</span>";
        sHTML1+="&nbsp";

        sHTML1+="<span id='spanMonth' style='border-style:solid;border-width:1;";
        sHTML1+="border-color:#3366FF;cursor:hand' ";
        sHTML1+="onmouseover='swapImage(\"changeMonth\",\"drop2.gif\");";
        sHTML1+="this.style.borderColor=\"#88AAFF\";";
        sHTML1+="window.status=\""+selectMonthMessage+"\"' ";
        sHTML1+="onmouseout='swapImage(\"changeMonth\",\"drop1.gif\");";
        sHTML1+="this.style.borderColor=\"#3366FF\";window.status=\"\"' ";
        sHTML1+="onclick='popUpMonth()'></span>&nbsp;";


        sHTML1+="<span id='spanYear' style='border-style:solid;border-width:1;";
        sHTML1+="border-color:#3366FF;cursor:hand' ";
        sHTML1+="onmouseover='swapImage(\"changeYear\",\"drop2.gif\");";
        sHTML1+="this.style.borderColor=\"#88AAFF\";";
        sHTML1+="window.status=\""+selectYearMessage+"\"' ";
        sHTML1+="onmouseout='swapImage(\"changeYear\",\"drop1.gif\");";
        sHTML1+="this.style.borderColor=\"#3366FF\";window.status=\"\"'    ";
        sHTML1+="onclick='popUpYear()'></span>&nbsp;";

        document.getElementById("caption").innerHTML = sHTML1;

        bPageLoaded=true
    }
}

function hideCalendar()    {

	if( crossobj.visibility=="hidden" )
		return;
	
		popDownMonth();
		
    crossobj.visibility="hidden";

    if (crossMonthObj != null) {
        crossMonthObj.visibility="hidden";
    }

    if (crossYearObj !=    null) {
        crossYearObj.visibility="hidden";
    }

    showElement( stackCalHid );

}

function padZero(num) {
    return ((num < 10)? '0' + num : num);
}

function constructDate(d,m,y)
{
    sTmp = dateFormat
    sTmp = sTmp.replace    ("dd","<e>");
    sTmp = sTmp.replace    ("d","<d>");
    sTmp = sTmp.replace    ("<e>",padZero(d));
    sTmp = sTmp.replace    ("<d>",d);
    sTmp = sTmp.replace    ("mmm","<o>");
    sTmp = sTmp.replace    ("mm","<n>");
    sTmp = sTmp.replace    ("m","<m>");
    sTmp = sTmp.replace    ("<m>",m+1);
    sTmp = sTmp.replace    ("<n>",padZero(m+1));
    sTmp = sTmp.replace    ("<o>",monthName[m]);
    return sTmp.replace ("yyyy",y);
}

function closeCalendar() {
    var sTmp;

    hideCalendar();
    ctlToPlaceValue.value = constructDate(dateSelected,monthSelected,yearSelected);
}

/*** Month Pulldown    ***/

function StartDecMonth()
{
    intervalID1=setInterval("decMonth()",80);
}

function StartIncMonth()
{
    intervalID1=setInterval("incMonth()",80);
}

function incMonth () {
    monthSelected++
    if (monthSelected>11) {
        monthSelected=0;
        yearSelected++;
    }
    constructCalendar();
}

function decMonth () {
    monthSelected--
    if (monthSelected<0) {
        monthSelected=11;
        yearSelected--;
    }
    constructCalendar();
}

function constructMonth() {
    popDownYear()

    if (!monthConstructed) {
        var sHTML = "";