1. 新建CalendarWidget.js文件, 內容如下:
// Calendar Widget
function CalendarWidget(InstanceName) {
// /Global Tag
this.instanceName = InstanceName;
// /Properties
this.separator = "-";
this.oBtnOKTitle = "OK";
this.oBtnTodayTitle = "Today";
this.oBtnCancelTitle = "Cancel";
this.hour="HH";
this.minute="MM";
this.second="SS";
this.weekDaySting = new Array("S", "M", "T", "W", "T", "F", "S");
this.monthSting = new Array("January", "February", "March", "April", "May",
"June", "July", "August", "September", "October", "November",
"December");
this.Width = 200;
this.currDate = new Date();
this.today = new Date();
this.startYear = 1970;
this.endYear = 2099;
// /Css
this.normalfontColor = "#666666";
this.selectedfontColor = "red";
this.divBorderCss = "1px solid #BCD0DE";
this.titleTableBgColor = "#98B8CD";
this.tableBorderColor = "#CCCCCC"
// /Method
this.Init = CalendarInit;
this.Fill = CalendarFill;
this.Refresh = CalendarRefresh;
this.Restore = CalendarRestore;
// /HTMLObject
this.oTaget = null;
this.oPreviousCell = null;
this.sDIVID = InstanceName + "_Div";
this.sTABLEID = InstanceName + "_Table";
this.sMONTHID = InstanceName + "_Month";
this.sYEARID = InstanceName + "_Year";
// /TIME
this.sMINUTEID = InstanceName + "_Minute";
this.sSECONDID = InstanceName + "_Second";
this.sHOURID = InstanceName + "_Hour";
// /ETCOBJ
this.oBTNOK = InstanceName + "_OK";
this.oTIMEDIVID = InstanceName + "_TIMEDIV";
this.sTODAYBTNID = InstanceName + "_TODAYBTN";
}
// /Create panel
function CalendarInit() {
var sMonth, sYear
sMonth = this.currDate.getMonth();
sYear = this.currDate.getYear();
htmlAll = "<div id='" + this.sDIVID
+ "' style='display:none;position:absolute;width:" + this.Width
+ ";border:" + this.divBorderCss
+ ";padding:2px;background-color:#FFFFFF;z-index:10;'>";
htmlAll += "<div align='center' style='z-index:10;'>";
// / Month
htmloMonth = "<select id='" + this.sMONTHID
+ "' οnchange=CalendarMonthChange(" + this.instanceName
+ ") style='width:50%;z-index:10;'>";
for (i = 0; i < 12; i++) {
htmloMonth += "<option value='" + i + "'>" + this.monthSting[i]
+ "</option>";
}
htmloMonth += "</select>";
// / Year
htmloYear = "<select id='" + this.sYEARID
+ "' οnchange=CalendarYearChange(" + this.instanceName
+ ") style='width:50%;z-index:10;'>";
for (i = this.startYear; i <= this.endYear; i++) {
htmloYear += "<option value='" + i + "'>" + i + "</option>";
}
htmloYear += "</select></div>";
// / Day
htmloDayTable = "<table id='" + this.sTABLEID
+ "' width='100%' border=0 cellpadding=0 cellspacing=1 bgcolor='"
+ this.tableBorderColor + "' sytle='z-index:10;'>";
htmloDayTable += "<tbody bgcolor='#ffffff'style='font-size:13px'>";
for (i = 0; i <= 6; i++) {
if (i == 0)
htmloDayTable += "<tr bgcolor='" + this.titleTableBgColor + "'>";
else
htmloDayTable += "<tr>";
for (j = 0; j < 7; j++) {
if (i == 0) {
htmloDayTable += "<td height='20' align='center' valign='middle' style='cursor:hand'>";
htmloDayTable += this.weekDaySting[j] + "</td>"
} else {
htmloDayTable += "<td height='20' align='center' valign='middle' style='cursor:hand'";
htmloDayTable += " οnmοuseοver=CalendarCellsMsOver("
+ this.instanceName + ")";
htmloDayTable += " οnmοuseοut=CalendarCellsMsOut("
+ this.instanceName + ")";
htmloDayTable += " οnclick=CalendarCellsClick(this,"
+ this.instanceName + ")>";
htmloDayTable += " </td>"
}
}
htmloDayTable += "</tr>";
}
htmloDayTable += "</tbody></table>";
// / Time HH:MM:SS
htmloTime = "<div id='"+ this.oTIMEDIVID +"' align='center' style='width:100%;z-index:10;display:none'>";
htmloTime += "<select id='"+ this.sHOURID +"' style='width:28%;z-index:10;'>";
for (i = 0; i < 24; i++) {
val = CalendarDblNum(i);
htmloTime += "<option value='" + val + "'>" + val + "</option>";
}
htmloTime += "</select>" + this.hour;
htmloTime += "<select id='"+ this.sMINUTEID +"' style='width:28%;z-index:10;'>";
for (i = 0; i < 60; i++) {
val = CalendarDblNum(i);
htmloTime += "<option value='" + val + "'>" + val + "</option>";
}
htmloTime += "</select>"+ this.minute;
htmloTime += "<select id='"+ this.sSECONDID +"' style='width:26%;z-index:10;'>";
for (i = 0; i < 60; i++) {
val = CalendarDblNum(i);
htmloTime += "<option value='" + val + "'>" + val + "</option>";
}
htmloTime += "</select>"+ this.second;
htmloTime += "</div>";
// / OK Button
htmloBtnOK = "<div align='center' style='padding:3px;z-index:10;'>"
htmloBtnOK += "<button id='"+ this.oBTNOK
+ "' style='width:30%;border:1px solid #BCD0DE;cursor:hand'"
htmloBtnOK += " οnclick=CalendarOkClick(" + this.instanceName + ")>"
+ this.oBtnOKTitle + "</button> "
// / Today Button
htmloButton = "<button id='"+ this.sTODAYBTNID
+ "' style='width:30%;border:1px solid #BCD0DE;cursor:hand'"
htmloButton += " οnclick=CalendarTodayClick(" + this.instanceName + ")>"
+ this.oBtnTodayTitle + "</button> "
// / Reset Button
htmloButton += "<button style='width:30%;border:1px solid #BCD0DE;cursor:hand'"
htmloButton += " οnclick=CalendarCancel(" + this.instanceName + ")>"
+ this.oBtnCancelTitle + "</button> "
htmloButton += "</div>"
// / All
htmlAll = htmlAll + htmloMonth + htmloYear + htmloDayTable + htmloTime + htmloBtnOK + htmloButton
+ "</div>";
document.write(htmlAll);
this.Fill();
}
// /
function CalendarFill() {
var sMonth, sYear, sWeekDay, sToday, oTable, currRow, MaxDay, iDaySn, sIndex, rowIndex, cellIndex, oSelectMonth, oSelectYear
sMonth = this.currDate.getMonth();
sYear = this.currDate.getYear();
sWeekDay = (new Date(sYear, sMonth, 1)).getDay();
sToday = this.currDate.getDate();
iDaySn = 1
oTable = document.all[this.sTABLEID];
currRow = oTable.rows[1];
MaxDay = CalendarGetMaxDay(sYear, sMonth);
oSelectMonth = document.all[this.sMONTHID]
oSelectMonth.selectedIndex = sMonth;
oSelectYear = document.all[this.sYEARID]
for (i = 0; i < oSelectYear.length; i++) {
if (parseInt(oSelectYear.options[i].value) == sYear)
oSelectYear.selectedIndex = i;
}
// //
for (rowIndex = 1; rowIndex <= 6; rowIndex++) {
if (iDaySn > MaxDay)
break;
currRow = oTable.rows[rowIndex];
cellIndex = 0;
if (rowIndex == 1)
cellIndex = sWeekDay;
for (; cellIndex < currRow.cells.length; cellIndex++) {
if (iDaySn == sToday) {
currRow.cells[cellIndex].innerHTML = "<font color='"
+ this.selectedfontColor + "'><i><b>" + iDaySn
+ "</b></i></font>";
this.oPreviousCell = currRow.cells[cellIndex];
} else {
currRow.cells[cellIndex].innerHTML = iDaySn;
currRow.cells[cellIndex].style.color = this.normalfontColor;
}
CalendarCellSetCss(0, currRow.cells[cellIndex]);
iDaySn++;
if (iDaySn > MaxDay)
break;
}
}
}
// / Clear Data
function CalendarRestore() {
var i, j, oTable
oTable = document.all[this.sTABLEID]
for (i = 1; i < oTable.rows.length; i++) {
for (j = 0; j < oTable.rows[i].cells.length; j++) {
CalendarCellSetCss(0, oTable.rows[i].cells[j]);
oTable.rows[i].cells[j].innerHTML = " ";
}
}
}
// / refresh
function CalendarRefresh(newDate) {
this.currDate = newDate;
this.Restore();
this.Fill();
}
// / Cell MouseOver
function CalendarCellsMsOver(oInstance) {
var myCell = event.srcElement;
CalendarCellSetCss(0, oInstance.oPreviousCell);
if (myCell) {
CalendarCellSetCss(1, myCell);
oInstance.oPreviousCell = myCell;
}
}
// //// Cell MouseOut
function CalendarCellsMsOut(oInstance) {
var myCell = event.srcElement;
CalendarCellSetCss(0, myCell);
}
// / Year Change
function CalendarYearChange(oInstance) {
var sDay, sMonth, sYear, newDate
sDay = oInstance.currDate.getDate();
sMonth = oInstance.currDate.getMonth();
sYear = document.all[oInstance.sYEARID].value
newDate = new Date(sYear, sMonth, sDay);
oInstance.Refresh(newDate);
}
// / Month Change
function CalendarMonthChange(oInstance) {
var sDay, sMonth, sYear, newDate
sDay = oInstance.currDate.getDate();
sMonth = document.all[oInstance.sMONTHID].value
sYear = oInstance.currDate.getYear();
newDate = new Date(sYear, sMonth, sDay);
oInstance.Refresh(newDate);
}
function CalendarCellsClick(oCell, oInstance) {
var sDay, sMonth, sYear, newDate
sYear = oInstance.currDate.getFullYear();
sMonth = oInstance.currDate.getMonth();
sDay = oInstance.currDate.getDate();
if (oCell != null && oCell.innerText != null
&& oCell.innerText.length > 0) {
sDay = parseInt(oCell.innerText);
if (sDay != oInstance.currDate.getDate()) {
newDate = new Date(sYear, sMonth, sDay);
oInstance.Refresh(newDate);
}
} else {
return "";
}
}
// / "OK" button Click
function CalendarOkClick(oInstance){
sYear = oInstance.currDate.getFullYear();
sMonth = oInstance.currDate.getMonth();
sDay = oInstance.currDate.getDate();
sTime = CalendarWidget.getSelectedTime(oInstance);
sDateString = sYear + oInstance.separator + CalendarDblNum(sMonth + 1)
+ oInstance.separator + CalendarDblNum(sDay) + sTime;
// set DateString
var tagName = oInstance.oTaget.tagName.toLowerCase();
if (tagName == "input") {
oInstance.oTaget.value = sDateString;
} else if (tagName == "label"
|| tagName == "span"
|| tagName == "div") {
if (oInstance.oTaget.attributes["value"] != null)
oInstance.oTaget.value = sDateString;
oInstance.oTaget.innerText = sDateString;
}
// Close
CalendarClose(oInstance);
return sDateString;
}
// / Get Time
CalendarWidget.getSelectedTime = function (oInstance) {
_timeDiv = document.all[oInstance.oTIMEDIVID];
if (_timeDiv != null && _timeDiv.style.display != "none") {
_hour = document.all[oInstance.sHOURID].value;
_minute = document.all[oInstance.sMINUTEID].value;
_second = document.all[oInstance.sSECONDID].value;
return " " + _hour + ":" + _minute + ":" + _second;
} else {
return "";
}
}
// / "Today" button Click
function CalendarTodayClick(oInstance) {
_hour = document.all[oInstance.sHOURID];
_minute = document.all[oInstance.sMINUTEID];
_second = document.all[oInstance.sSECONDID];
// Set Current Time
var _tody = new Date();
_hour.value = CalendarDblNum(_tody.getHours());
_minute.value = CalendarDblNum(_tody.getMinutes());
_second.value = CalendarDblNum(_tody.getSeconds());
oInstance.Refresh(_tody);
}
// / Get date content
CalendarWidget.getDateString = function(oInputSrc, oInstance, oMode){
if (oInputSrc && oInstance) {
var CalendarDiv = document.all[oInstance.sDIVID];
oInstance.oTaget = oInputSrc;
_timeDiv = document.all[oInstance.oTIMEDIVID];
_timeDiv.style.display = oMode == "1" ? "block" : "none";
CalendarDiv.style.pixelLeft = CalendargetPos(oInputSrc, "Left");
CalendarDiv.style.pixelTop = CalendargetPos(oInputSrc, "Top")
+ oInputSrc.offsetHeight;
CalendarDiv.style.display = (CalendarDiv.style.display == "none") ? ""
: "none";
}
}
// / Set Cell Css
function CalendarCellSetCss(sMode, oCell) {
// sMode
// 0: OnMouserOut 1: OnMouseOver
if (sMode) {
oCell.style.border = "1px solid #5589AA";
oCell.style.backgroundColor = "#BCD0DE";
oCell.style.zIndex = "10";
} else {
oCell.style.border = "1px solid #FFFFFF";
oCell.style.backgroundColor = "#FFFFFF";
oCell.style.zIndex = "10";
}
}
// / Get MaxDay of current month
function CalendarGetMaxDay(nowYear, nowMonth) {
var nextMonth, nextYear, currDate, nextDate, theMaxDay
nextMonth = nowMonth + 1;
if (nextMonth > 11) {
nextYear = nowYear + 1;
nextMonth = 0;
} else {
nextYear = nowYear;
}
currDate = new Date(nowYear, nowMonth, 1);
nextDate = new Date(nextYear, nextMonth, 1);
theMaxDay = (nextDate - currDate) / (24 * 60 * 60 * 1000);
return theMaxDay;
}
// / Get Absolute Position
function CalendargetPos(el, ePro) {
var ePos = 0;
while (el != null) {
ePos += el["offset" + ePro];
el = el.offsetParent;
}
return ePos;
}
function CalendarDblNum(num) {
if (num < 10)
return "0" + num;
else
return num;
}
// /Close
function CalendarClose(oInstance){
var CalendarDiv = document.all[oInstance.sDIVID];
CalendarDiv.style.display = "none";
}
// /Cancel
function CalendarCancel(oInstance) {
var tagName = oInstance.oTaget.tagName.toLowerCase();
if (tagName == "input") {
oInstance.oTaget.value = "";
} else if (tagName == "label"
|| tagName == "span"
|| tagName == "div") {
if (oInstance.oTaget.attributes["value"] != null)
oInstance.oTaget.value = "";
oInstance.oTaget.innerText = "";
}
CalendarClose(oInstance);
}
// /Calendar Instance Method
Calendar_Instance = function($instanceName){
var $instanceObj = new CalendarWidget($instanceName);
$instanceObj.weekDaySting = new Array("日", "一", "二", "三", "四", "五", "六");
$instanceObj.monthSting = new Array("一月", "二月", "三月", "四月", "五月", "六月", "七月",
"八月", "九月", "十月", "十一月", "十二月");
$instanceObj.hour = "時";
$instanceObj.minute = "分";
$instanceObj.second = "秒";
$instanceObj.oBtnOKTitle = "確定";
$instanceObj.oBtnTodayTitle = "今天";
$instanceObj.oBtnCancelTitle = "重置";
$instanceObj.Init();
return $instanceObj;
}
// /Instance Calendar
var oCalendarInstance = Calendar_Instance("oCalendarInstance");
2. 外部調用代碼
CalendarWidget.getDateString(destObj, oCalendarInstance, mode);
參數說明
@param destObj 目標對象,即接受日期內容的對象
@param oCalendarInstance // 日期控件實例化對象
@param mode // 顯示模式("1", 顯示“時:分:秒”;"0", 不顯示)