把以下4个文件放到同一个文件夹下,运行 test.html 即可
//文件 DateBox.html
<!-- <html> <head> <title>hiyu</title> <LINK href="./tenkey.css" type=text/css rel=stylesheet> <meta http-equiv="Content-Language" content="ja"> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <meta http-equiv="Expires" content="-10"> <meta http-equiv="Pragma" content="No-cache"> <meta http-equiv="Cache-Control", "private"> </head> <SCRIPT language=javascript> var getStr=window.dialogArguments; </script> <body onLoad=" Initform();document.frmMain.btnCancel.focus();" onContextmenu="return false;"> <form id="frmMain" name="frmCld"> <TABLE id="tblHead" class="TrW" border="0" cellspacing="0" cellpadding="2" bgcolor="#ffffff" style="margin-top:8px;"> <TR > <TD width="30%" height="35" align="left" style="padding-top:12px;"> <SELECT style="font-size:32px; width:75%; height:100%;" id="selYaer" name="selYaer" onChange="InitCalendar(this.value,window.document.frmMain.selMon.value,0)"> </SELECT> </TD> <TD width="40%" align="center"> <INPUT class="BtnSetToday1" onclick="SetToday()" type="button" value="本日を選択" ID="btnToday" NAME="btnToday"> </TD> <TD width="30%" align="right" style="padding-top:12px;" > <SELECT style="font-size:32px; width:75%; height:100%;" id="selMon" name="selMon" onChange="InitCalendar(window.document.frmMain.selYaer.value,this.value,0)"> <OPTION value="1">1月</OPTION> <OPTION value="2">2月</OPTION> <OPTION value="3">3月</OPTION> <OPTION value="4">4月</OPTION> <OPTION value="5">5月</OPTION> <OPTION value="6">6月</OPTION> <OPTION value="7">7月</OPTION> <OPTION value="8">8月</OPTION> <OPTION value="9">9月</OPTION> <OPTION value="10">10月</OPTION> <OPTION value="11">11月</OPTION> <OPTION value="12">12月</OPTION> </SELECT> </TD> </TR> </TABLE> <Table class="TrW" border="0" cellspacing="0" cellpadding="2" bgcolor="#FFFFFF" style="margin-top:5px;"> <TR><TD ALIGN=left valign=top> <TABLE width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#FFFFCC"> <TR><TD valign="top" bgcolor="#808080" ALIGN="center"> <TABLE width="100%" id="tblCal" border="0" cellspacing="1" cellpadding="0"> <tr class="TrH"> <td align="center" class="Sunday">日</td> <td align="center" class="Weektitle">一</td> <td align="center" class="Weektitle">二</td> <td align="center" class="Weektitle">三</td> <td align="center" class="Weektitle">四</td> <td align="center" class="Weektitle">五</td> <td align="center" class="Saturday">六</td> </tr> <tr class="TrH"> <td align="center" class="CalendarCell" onClick="SetDate(this)" onmouseover="SetBackColorByMouseOver(this,'#FFFF80');" onMouseOut="SetBackColorByMouseOut(this);"></td> <td align="center" class="CalendarCell" onClick="SetDate(this)" onMouseOut="SetBackColorByMouseOut(this);" onmouseover="SetBackColorByMouseOver(this,'#FFFF80');"></td> <td align="center" class="CalendarCell" onClick="SetDate(this)" onMouseOut="SetBackColorByMouseOut(this);" onmouseover="SetBackColorByMouseOver(this,'#FFFF80');"></td> <td align="center" class="CalendarCell" onClick="SetDate(this)" onMouseOut="SetBackColorByMouseOut(this);" onmouseover="SetBackColorByMouseOver(this,'#FFFF80');"></td> <td align="center" class="CalendarCell" onClick="SetDate(this)" onMouseOut="SetBackColorByMouseOut(this);" onmouseover="SetBackColorByMouseOver(this,'#FFFF80');"></td> <td align="center" class="CalendarCell" onClick="SetDate(this)" onMouseOut="SetBackColorByMouseOut(this);" onmouseover="SetBackColorByMouseOver(this,'#FFFF80');"></td> <td align="center" class="CalendarCell" onClick="SetDate(this)" onMouseOut="SetBackColorByMouseOut(this);" onmouseover="SetBackColorByMouseOver(this,'#FFFF80');"> </td> </tr> <tr class="TrH"> <td align="center" class="CalendarCell" onClick="SetDate(this)" onmouseover="SetBackColorByMouseOver(this,'#FFFF80');" onMouseOut="SetBackColorByMouseOut(this);"></td> <td align="center" class="CalendarCell" onClick="SetDate(this)" onMouseOut="SetBackColorByMouseOut(this);" onmouseover="SetBackColorByMouseOver(this,'#FFFF80');"></td> <td align="center" class="CalendarCell" onClick="SetDate(this)" onMouseOut="SetBackColorByMouseOut(this);" onmouseover="SetBackColorByMouseOver(this,'#FFFF80');"></td> <td align="center" class="CalendarCell" onClick="SetDate(this)" onMouseOut="SetBackColorByMouseOut(this);" onmouseover="SetBackColorByMouseOver(this,'#FFFF80');"></td> <td align="center" class="CalendarCell" onClick="SetDate(this)" onMouseOut="SetBackColorByMouseOut(this);" onmouseover="SetBackColorByMouseOver(this,'#FFFF80');"></td> <td align="center" class="CalendarCell" onClick="SetDate(this)" onMouseOut="SetBackColorByMouseOut(this);" onmouseover="SetBackColorByMouseOver(this,'#FFFF80');"></td> <td align="center" class="CalendarCell" onClick="SetDate(this)" onMouseOut="SetBackColorByMouseOut(this);" onmouseover="SetBackColorByMouseOver(this,'#FFFF80');"></td> </tr> <tr class="TrH"> <td align="center" class="CalendarCell" onClick="SetDate(this)" onmouseover="SetBackColorByMouseOver(this,'#FFFF80');" onMouseOut="SetBackColorByMouseOut(this);"></td> <td align="center" class="CalendarCell" onClick="SetDate(this)" onMouseOut="SetBackColorByMouseOut(this);" onmouseover="SetBackColorByMouseOver(this,'#FFFF80');"></td> <td align="center" class="CalendarCell" onClick="SetDate(this)" onMouseOut="SetBackColorByMouseOut(this);" onmouseover="SetBackColorByMouseOver(this,'#FFFF80');"></td> <td align="center" class="CalendarCell" onClick="SetDate(this)" onMouseOut="SetBackColorByMouseOut(this);" onmouseover="SetBackColorByMouseOver(this,'#FFFF80');"></td> <td align="center" class="CalendarCell" onClick="SetDate(this)" onMouseOut="SetBackColorByMouseOut(this);" onmouseover="SetBackColorByMouseOver(this,'#FFFF80');"></td> <td align="center" class="CalendarCell" onClick="SetDate(this)" onMouseOut="SetBackColorByMouseOut(this);" onmouseover="SetBackColorByMouseOver(this,'#FFFF80');"></td> <td align="center" class="CalendarCell" onClick="SetDate(this)" onMouseOut="SetBackColorByMouseOut(this);" onmouseover="SetBackColorByMouseOver(this,'#FFFF80');"></td> </tr> <tr class="TrH"> <td align="center" class="CalendarCell" onClick="SetDate(this)" onmouseover="SetBackColorByMouseOver(this,'#FFFF80');" onMouseOut="SetBackColorByMouseOut(this);"></td> <td align="center" class="CalendarCell" onClick="SetDate(this)" onMouseOut="SetBackColorByMouseOut(this);" onmouseover="SetBackColorByMouseOver(this,'#FFFF80');"></td> <td align="center" class="CalendarCell" onClick="SetDate(this)" onMouseOut="SetBackColorByMouseOut(this);" onmouseover="SetBackColorByMouseOver(this,'#FFFF80');"></td> <td align="center" class="CalendarCell" onClick="SetDate(this)" onMouseOut="SetBackColorByMouseOut(this);" onmouseover="SetBackColorByMouseOver(this,'#FFFF80');"></td> <td align="center" class="CalendarCell" onClick="SetDate(this)" onMouseOut="SetBackColorByMouseOut(this);" onmouseover="SetBackColorByMouseOver(this,'#FFFF80');"></td> <td align="center" class="CalendarCell" onClick="SetDate(this)" onMouseOut="SetBackColorByMouseOut(this);" onmouseover="SetBackColorByMouseOver(this,'#FFFF80');"></td> <td align="center" class="CalendarCell" onClick="SetDate(this)" onMouseOut="SetBackColorByMouseOut(this);" onmouseover="SetBackColorByMouseOver(this,'#FFFF80');"></td> </tr> <tr class="TrH"> <td align="center" class="CalendarCell" onClick="SetDate(this)" onmouseover="SetBackColorByMouseOver(this,'#FFFF80');" onMouseOut="SetBackColorByMouseOut(this);"></td> <td align="center" class="CalendarCell" onClick="SetDate(this)" onMouseOut="SetBackColorByMouseOut(this);" onmouseover="SetBackColorByMouseOver(this,'#FFFF80');"></td> <td align="center" class="CalendarCell" onClick="SetDate(this)" onMouseOut="SetBackColorByMouseOut(this);" onmouseover="SetBackColorByMouseOver(this,'#FFFF80');"></td> <td align="center" class="CalendarCell" onClick="SetDate(this)" onMouseOut="SetBackColorByMouseOut(this);" onmouseover="SetBackColorByMouseOver(this,'#FFFF80');"></td> <td align="center" class="CalendarCell" onClick="SetDate(this)" onMouseOut="SetBackColorByMouseOut(this);" onmouseover="SetBackColorByMouseOver(this,'#FFFF80');"></td> <td align="center" class="CalendarCell" onClick="SetDate(this)" onMouseOut="SetBackColorByMouseOut(this);" onmouseover="SetBackColorByMouseOver(this,'#FFFF80');"></td> <td align="center" class="CalendarCell" onClick="SetDate(this)" onMouseOut="SetBackColorByMouseOut(this);" onmouseover="SetBackColorByMouseOver(this,'#FFFF80');"></td> </tr> <tr class="TrH"> <td align="center" class="CalendarCell" onClick="SetDate(this)" onmouseover="SetBackColorByMouseOver(this,'#FFFF80');" onMouseOut="SetBackColorByMouseOut(this);"></td> <td align="center" class="CalendarCell" onClick="SetDate(this)" onMouseOut="SetBackColorByMouseOut(this);" onmouseover="SetBackColorByMouseOver(this,'#FFFF80');"></td> <td align="center" class="CalendarCell" onClick="SetDate(this)" onMouseOut="SetBackColorByMouseOut(this);" onmouseover="SetBackColorByMouseOver(this,'#FFFF80');"></td> <td align="center" class="CalendarCell" onClick="SetDate(this)" onMouseOut="SetBackColorByMouseOut(this);" onmouseover="SetBackColorByMouseOver(this,'#FFFF80');"></td> <td align="center" class="CalendarCell" onClick="SetDate(this)" onMouseOut="SetBackColorByMouseOut(this);" onmouseover="SetBackColorByMouseOver(this,'#FFFF80');"></td> <td align="center" class="CalendarCell" onClick="SetDate(this)" onMouseOut="SetBackColorByMouseOut(this);" onmouseover="SetBackColorByMouseOver(this,'#FFFF80');"></td> <td align="center" class="CalendarCell" onClick="SetDate(this)" onMouseOut="SetBackColorByMouseOut(this);" onmouseover="SetBackColorByMouseOver(this,'#FFFF80');"></td> </tr> </TABLE> </TD></TR> </TABLE> </TD></TR> </TABLE> <TABLE cellSpacing="0" cellPadding="2" width="100%" bgColor="#ffffff" border="0" style="margin-top:5px; font-size:32px;"> <TR height="58"> <TD width="35%" align="left"> <INPUT class="BtnChgCalendar1" type="button" value="前年" align="right" onClick="ChangeCalendar(0,1)"> <INPUT class="BtnChgCalendar1" type="button" align="right" value="前月" onClick="ChangeCalendar(1,1)"> </TD> <TD width="30%" align="center"> <INPUT name="btnCancel" class="BtnCalendarCancel1" onclick="CloseWindow();" type="button" value="CLOSE"> </TD> <TD width="35%" align="right"> <INPUT class="BtnChgCalendar1" type="button" value="翌月" onClick="ChangeCalendar(1,0)"> <INPUT class="BtnChgCalendar1" type="button" align="right" value="翌年" onClick="ChangeCalendar(0,0)"> </TD> </TR> </TABLE> </form> </body> </html> <Script Language="javascript1.2"> function Initform() { var initDate = getStr[0]; if (initDate == "") { InitCalendar(0, 0, 0); } else { initDate = new Date(initDate); InitCalendar(initDate.getFullYear(), initDate.getMonth() + 1, initDate.getDate()); } } //************************************** // カレンダーを初期化 //************************************** function InitCalendar(p_Year,p_Mon,p_Day) { InitYearSel(p_Year); InitMonSel(p_Mon); InitDay(window.document.frmMain.selYaer.value,window.document.frmMain.selMon.value,p_Day); } //************************************** // 日付を変わり // p_Mode:0 年 1 月 // p_Plus:0 ＋ 1 - //************************************** function ChangeCalendar(p_Mode,p_Plus) { if(0==p_Mode) { //年 if(0==p_Plus) { InitCalendar((window.document.frmMain.selYaer.value-(-1)),window.document.frmMain.selMon.value,0); } else if(1==p_Plus) { InitCalendar((window.document.frmMain.selYaer.value-1),window.document.frmMain.selMon.value,0) } } else if(1==p_Mode) { //月 if(0==p_Plus) { if(12==window.document.frmMain.selMon.value) { InitCalendar((window.document.frmMain.selYaer.value-(-1)),1,0); } else { InitCalendar(window.document.frmMain.selYaer.value,(window.document.frmMain.selMon.value-(-1)),0); } } else if(1==p_Plus) { if(1==window.document.frmMain.selMon.value) { InitCalendar((window.document.frmMain.selYaer.value-1),12,0) } else { InitCalendar(window.document.frmMain.selYaer.value,(window.document.frmMain.selMon.value-1),0); } } } } //************************************** // 年部分初期化 //************************************** function InitYearSel(p_Year) { if(0==p_Year) { var d = new Date(); p_Year = d.getYear(); } //Select中に年数を追加 //先ずクリア var selLen = window.document.frmMain.selYaer.options.length; for(j=0;j<selLen;j++) { window.document.frmMain.selYaer.options.remove(selLen-(j+1)); } var arrYear = new Array(); for (i = -5; i<6; i++) { var oOption = document.createElement("OPTION"); window.document.frmMain.selYaer.options.add(oOption); oOption.innerText = p_Year - (-i); oOption.value = p_Year - (-i); } //年を選択する window.document.frmMain.selYaer.value = p_Year; } //************************************** // 月部分初期化 //************************************** function InitMonSel(p_Mon) { if(0==p_Mon) { var d = new Date(); p_Mon = d.getMonth() + 1; //0 <= getMonth <= 11 } //月を選択する window.document.frmMain.selMon.value = p_Mon; } //************************************** // 日付部分初期化 //************************************** function InitDay(p_Year,p_Mon,p_Day) { if(0==p_Day) { var now = new Date(); p_Day = now.getDate(); } var indexDay = GetFirstDayIndexInWeek(p_Year,p_Mon); //0-6 var allDays = GetDaysInMonth(p_Year,p_Mon); //前の月 var preDay = AddMonth(p_Year,p_Mon,-1); var prealldays = GetDaysInMonth(preDay.substring(0,4),preDay.substring(4,(preDay.length-4))); //今日の日 var now = new Date(); var nowDay = now.getDate(); var blnEque = IsSameYearMon(p_Year,p_Mon); //今操作の日付はシステムの年と月は同じですか //rows=7 cols=7 //先ずTable部分をクリア for (i=1; i<7; i++) { //i=0 is title for (j=0; j<7; j++) { document.all.tblCal.rows(i).cells(j).innerText=""; document.all.tblCal.rows(i).cells(j).style.backgroundColor = "#FFFFCC"; } } for (i=1; i<7; i++) { //i=0 is title for (j=0; j<7; j++) { if(((i-1)*7 + j) < indexDay) { //前の月 //document.all.tblCal.rows(i).cells(j).innerText = prealldays - (indexDay- ((i-1)*7 + j)); } else { var strDayTmp = (((i-1)*7 + j)-indexDay) + 1 if(strDayTmp <= allDays) { //Current Day <= All Days document.all.tblCal.rows(i).cells(j).innerText = strDayTmp; if (p_Day == 0) { if((blnEque==1) && (nowDay==strDayTmp)) {