漂亮的 JS 日期控件

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
   + "' onchange=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
   + "' onchange=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 += " onmouseover=CalendarCellsMsOver("
      + this.instanceName + ")";
    htmloDayTable += " onmouseout=CalendarCellsMsOut("
      + this.instanceName + ")";
    htmloDayTable += " onclick=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 += " onclick=CalendarOkClick(" + this.instanceName + ")>"
   + this.oBtnOKTitle + "</button> "
 // / Today Button
 htmloButton = "<button id='"+ this.sTODAYBTNID
   + "' style='width:30%;border:1px solid #BCD0DE;cursor:hand'"
 htmloButton += " onclick=CalendarTodayClick(" + this.instanceName + ")>"
   + this.oBtnTodayTitle + "</button> "
 // / Reset Button
 htmloButton += "<button style='width:30%;border:1px solid #BCD0DE;cursor:hand'"
 htmloButton += " onclick=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", 不显示)