function PopupCalendar(InstanceName) {
    ///Global Tag
    this.instanceName = InstanceName;
    ///Properties
    this.separator = "-"
    this.oBtnTodayTitle = "Today"
    this.oBtnCancelTitle = "Cancel"
    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 = 1950;
    this.endYear = 2020;
    ///Css
    this.divBorderCss = "1px solid #BCD0DE";
    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 + "oDiv";
    this.sTABLEID = InstanceName + "oTable";
    this.sMONTHID = InstanceName + "oMonth";
    this.sYEARID = InstanceName + "oYear";

}
function CalendarInit()     ///Create panel
{
    var sMonth, sYear
    sMonth = this.currDate.getMonth();
    sYear = this.currDate.getYear();
    htmlAll = "<div id='" + this.sDIVID + "' style='display:none;position:absolute;width:" + this.Width + "px;border:" + this.divBorderCss + ";padding:2px;background-color:#FFFFFF'>";
    htmlAll += "<div align='center'>";
    /// Month
    htmloMonth = "<select id='" + this.sMONTHID + "' onchange=CalendarMonthChange(" + this.instanceName + ") style='width:50%'>";
    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%'>";
    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 + "'>";
    htmloDayTable += "<tbody bgcolor='#ffffff'style='font-size:13px'>";
    for (i = 0; i <= 6; i++) {
        if (i == 0)
            htmloDayTable += "<tr bgcolor='#98B8CD'>";
        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 += "&nbsp;</td>"
            }
        }
        htmloDayTable += "</tr>";
    }
    htmloDayTable += "</tbody></table>";
    /// Today Button
    htmloButton = "<div align='center' style='padding:3px'>"
    htmloButton += "<button style='width:40%;border:1px solid #BCD0DE;background-color:#eeeeee;cursor:hand'"
    htmloButton += " onclick=CalendarTodayClick(" + this.instanceName + ")>" + this.oBtnTodayTitle + "</button>&nbsp;"
    htmloButton += "<button style='width:40%;border:1px solid #BCD0DE;background-color:#eeeeee;cursor:hand'"
    htmloButton += " onclick=CalendarCancel(" + this.instanceName + ")>" + this.oBtnCancelTitle + "</button> "
    htmloButton += "</div>"
    /// All
    htmlAll = htmlAll + htmloMonth + htmloYear + htmloDayTable + htmloButton + "</div>";
    document.write(htmlAll);
    this.Fill();
}
function CalendarFill()    ///
{
    var sMonth, sYear, sWeekDay, sToday, oTable, currRow, MaxDay, sDaySn, sIndex, rowIndex, cellIndex, oSelectMonth, oSelectYear
    sMonth = this.currDate.getMonth();
    sYear = this.currDate.getYear();
    sWeekDay = (new Date(sYear, sMonth, 1)).getDay();
    sToday = this.currDate.getDate();
    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 (sDaySn = 1, sIndex = sWeekDay; sIndex <= 6; sDaySn++, sIndex++) {

        if (sDaySn == sToday) {
            currRow.cells[sIndex].innerHTML = "<font color=red><i><b>" + sDaySn + "</b></i></font>";
            this.oPreviousCell = currRow.cells[sIndex];
        }
        else {
            currRow.cells[sIndex].innerHTML = sDaySn;
            currRow.cells[sIndex].style.color = "#666666";
        }
        CalendarCellSetCss(0, currRow.cells[sIndex]);
    }
    for (rowIndex = 2; rowIndex <= 6; rowIndex++) {
        if (sDaySn > MaxDay) break;
        currRow = oTable.rows[rowIndex];
        for (cellIndex = 0; cellIndex < currRow.cells.length; cellIndex++) {
            if (sDaySn == sToday) {
                currRow.cells[cellIndex].innerHTML = "<font color=red><i><b>" + sDaySn + "</b></i></font>";
                this.oPreviousCell = currRow.cells[cellIndex];
            }
            else {
                currRow.cells[cellIndex].innerHTML = sDaySn;
                currRow.cells[cellIndex].style.color = "#666666";
            }
            CalendarCellSetCss(0, currRow.cells[cellIndex]);
            sDaySn++;
            if (sDaySn > MaxDay) break;
        }
    }
}
function CalendarRestore()      /// Clear Data
{
    var 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 = "&nbsp;";
        }
    }
}
function CalendarRefresh(newDate)      ///
{
    this.currDate = newDate;
    this.Restore();
    this.Fill();
}
function CalendarCellsMsOver(oInstance)     /// Cell MouseOver
{
    var myCell
    myCell = event.srcElement;
    CalendarCellSetCss(0, oInstance.oPreviousCell);
    if (myCell) {
        CalendarCellSetCss(1, myCell);
        oInstance.oPreviousCell = myCell;
    }
}
function CalendarCellsMsOut(oInstance)     ////// Cell MouseOut
{
    var myCell
    myCell = event.srcElement;
    CalendarCellSetCss(0, myCell);
}
function CalendarCellsClick(oCell, oInstance) {
    var sDay, sMonth, sYear, newDate
    sYear = oInstance.currDate.getFullYear();
    sMonth = oInstance.currDate.getMonth();
    sDay = oInstance.currDate.getDate();
    if (oCell.innerText != " ") {
        sDay = parseInt(oCell.innerText);
        if (sDay != oInstance.currDate.getDate()) {
            newDate = new Date(sYear, sMonth, sDay);
            oInstance.Refresh(newDate);
        }
    }
    sDateString = sYear + oInstance.separator + CalendarDblNum(sMonth + 1) + oInstance.separator + CalendarDblNum(sDay);   ///return sDateString
    if (oInstance.oTaget.tagName == "INPUT") {
        oInstance.oTaget.value = sDateString;
    }
    document.all[oInstance.sDIVID].style.display = "none";
}
function CalendarYearChange(oInstance)     /// Year Change
{
    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);
}
function CalendarMonthChange(oInstance)     /// Month Change
{
    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 CalendarTodayClick(oInstance)     /// "Today" button Change
{
    oInstance.Refresh(new Date());
}
function getDateString(oInputSrc, oInstance) {
    if (oInputSrc && oInstance) {
        CalendarDiv = document.all[oInstance.sDIVID];
        oInstance.oTaget = oInputSrc;
        CalendarDiv.style.pixelLeft = (CalendargetPos(oInputSrc, "Left") + 135);
        CalendarDiv.style.pixelTop = CalendargetPos(oInputSrc, "Top");
        CalendarDiv.style.display = (CalendarDiv.style.display == "none") ? "" : "none";
    }
}
function CalendarCellSetCss(sMode, oCell)    /// Set Cell Css
{
    // sMode
    // 0: OnMouserOut 1: OnMouseOver 
    if (sMode) {
        oCell.style.border = "1px solid #5589AA";
        oCell.style.backgroundColor = "#BCD0DE";
    }
    else {
        oCell.style.border = "1px solid #FFFFFF";
        oCell.style.backgroundColor = "#FFFFFF";
    }
}
function CalendarGetMaxDay(nowYear, nowMonth)    /// Get MaxDay of current month
{
    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;
}
function CalendargetPos(el, ePro)     /// Get Absolute Position
{
    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;
}
function CalendarCancel(oInstance)    ///Cancel
{
    CalendarDiv = document.all[oInstance.sDIVID];
    CalendarDiv.style.display = "none";
}
var oCalendarChs = new PopupCalendar("oCalendarChs"); //初始化控件时,请给出实例名称:oCalendarChs
oCalendarChs.weekDaySting = new Array("日", "一", "二", "三", "四", "五", "六");
oCalendarChs.monthSting = new Array("一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月");
oCalendarChs.oBtnTodayTitle = "今天";
oCalendarChs.oBtnCancelTitle = "取消";
oCalendarChs.Init();