漂亮又易于修改的JavaScript日历

日历js代码：

XCtrlLib.XCalendar
   1
   2var XCtrlLib = function(){}
   3//function XCtrlLib(){}
   4
   5//Calendar
   6/**//*
   7var charLeft = "<<";
   8var charRight = ">>";
   9var charDrop = "▼";
  10var charClose = "×";
  11var charClear = "清空";
  12*/
  13XCtrlLib.XCalendar = function(){
  14    //set appearance of the calendar
  15    this.BgColor = "#ffffff";
  16    this.BorderColor = "#808080";
  17
  18    this.HeaderBgColor = "#0000aa";
  19    this.HeaderTextColor = "#ffffff";
  20    this.HeaderItemBorderColor = "#3366ff";
  21    this.HeaderItemBorderColorOver = "#88aaff";
  22    this.CloseBgColor = "#c0c0c0";
  23    this.CloseBgColorOver = "#dfdfdf";
  24    this.CloseBorderColor = "#ffffff #808080 #808080 #ffffff";
  25    this.CloseBorderColorOver = "#ffffff #808080 #808080 #ffffff";
  26    this.ListTextColor = "#000000";
  27    this.ListBgColor = "#ffffcc";
  28    this.ListBorderColor = "#808080";
  29    this.ListItemBgColorOver = "#ffcc00";
  30
  31    this.BodyBgColor = "#ffffff";
  32    this.WeekTitleTextColor = "#000000";
  33    this.WeekCountTextColor = "#000000"
  34    this.WeekDividerColor = "#d0d0d0";
  35    this.ItemTextColor = "#000000";
  36    this.ItemBorderColor = "#ffffff";
  37    this.ItemBorderColorOver = "#808080";
  38    this.TodayTextColor = "#ff0000";
  39    this.HolidayTextColor = "#808080";
  40
  41    this.FooterBgColor = "#e0e0e0";
  42    this.FooterTextColor = "#000000";
  43    this.FooterItemBorderColorOver = "#808080";
  44
  45    //
  46    this.ArrMonthName = new Array("一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月");
  47    this.ArrDayName = new Array("日","一","二","三","四","五","六");
  48
  49    this.CurrDate = null;
  50    this.SelectedDate = null;
  51
  52    this.PrevButton = null;
  53    this.NextButton = null;
  54    this.ClearButton = null;
  55    this.CloseButton = null;
  56
  57    this.YearDrop = null;
  58    this.MonthDrop = null;
  59
  60    this.YearList = null;
  61    this.MonthList = null;
  62
  63    this.Calendar = null;
  64    this.FrameTable = null;
  65    this.Header = null;
  66    this.BodyTable = null;
  67    this.Footer = null;
  68
  69    this.ValueControl = null;
  70    this.Popped = false;
  71    this.Changed = false;
  72    this.DateSeparator = "-";
  73
  74    this.YearListItem = new Array();
  75    this.YearListStartYear = null;
  76
  77    this.Icon = new Array();
  78
  79    //initialize the calendar
  80    this.Init = function(oDate,oValue,dateSeparator,imgPrevUrl,imgNextUrl,imgDropUrl,imgCloseUrl){
  81        this.Icon[0] = new Image;
  82        this.Icon[0].src = imgPrevUrl;
  83        this.Icon[1] = new Image;
  84        this.Icon[1].src = imgNextUrl;
  85        this.Icon[2] = new Image;
  86        this.Icon[2].src = imgDropUrl;
  87        this.Icon[3] = new Image;
  88        this.Icon[3].src = imgCloseUrl;
  89
  90        if(dateSeparator)
  91            this.DateSeparator = dateSeparator;
  92        if(oDate){
  93            this.CurrDate = oDate;
  94            this.SelectedDate = oDate;
  95        }else{
  96            this.CurrDate = new Date();
  97            this.SelectedDate = null;
  98        }
  99        //create calendar framework
 100        this.CreateOutLine();
 101        this.CreateFrameTable();
 102        this.CreateHeader();
 103        this.CreateBody(this.CurrDate,oValue);
 104        this.CreateFooter();
 105        //create month list and year list
 106        this.CreateMonthList();
 107        this.CreateYearList();
 108        //setup the calendar
 109        this.Calendar.appendChild(this.FrameTable);
 110        this.FrameTable.CellHeader.appendChild(this.Header);
 111        this.FrameTable.DivBody.appendChild(this.BodyTable);
 112        this.FrameTable.CellFooter.appendChild(this.Footer);
 113        this.Calendar.appendChild(this.MonthList);
 114        this.Calendar.appendChild(this.YearList);
 115
 116        this.HideCalendar();
 117    }
 118    //refresh the calendar
 119    this.RefreshCalendar = function(oDate,oValue,dateSeparator,forceRefresh){
 120        if(dateSeparator)
 121            this.DateSeparator = dateSeparator;
 122        /**//*
 123        //set change state to true if selected date not equals the parameter pass in
 124        if(forceRefresh || oValue != this.ValueControl){
 125            this.Changed = true;
 126        }else{
 127            if(!oDate && this.SelectedDate){
 128                this.Changed = true;
 129            }else if(oDate && !this.SelectedDate){
 130                this.Changed = true;
 131            }else if(oDate && this.SelectedDate){
 132                if(oDate.getFullYear() != this.SelectedDate.getFullYear() || oDate.getMonth() != this.SelectedDate.getMonth() || oDate.getDate() != this.SelectedDate.getDate()){
 133                    this.Changed = true;
 134                }else{
 135                    this.Changed = false;
 136                }
 137            }else{
 138                this.Changed = false;
 139            }
 140        }
 141        */
 142
 143        //if(this.Changed){
 144            if(oDate){
 145                this.CurrDate = oDate;
 146                if(!forceRefresh){
 147                    this.SelectedDate = oDate;
 148                }
 149            }else{
 150                this.CurrDate = new Date();
 151                this.SelectedDate = null;
 152            }
 153
 154            var year = this.CurrDate.getFullYear();
 155            var month = this.CurrDate.getMonth();
 156
 157            this.MonthDrop.innerHTML = "&nbsp;" + this.ArrMonthName[month] + "&nbsp;<img src='" + this.Icon[2].src + "' align='absmiddle'>";
 158            this.YearDrop.innerHTML = "&nbsp;" + year + "&nbsp;<img src='" + this.Icon[2].src + "' align='absmiddle'>";
 159            this.MonthDrop.MonthValue = month;
 160            this.YearDrop.YearValue = year;
 161
 162            this.RefreshMonthList();
 163            this.RefreshYearList();
 164
 165            this.FrameTable.DivBody.removeChild(this.BodyTable);
 166            this.BodyTable = null;
 167            this.CreateBody(this.CurrDate,oValue);
 168            this.FrameTable.DivBody.appendChild(this.BodyTable);
 169        //}else{
 170        //    this.HideMonthList();
 171        //    this.HideYearList();
 172        //}
 173    }
 174    //
 175    this.RefreshMonthList = function(){
 176        this.HideMonthList();
 177
 178        for(var i=0;i<this.MonthList.childNodes.length;i++){
 179            var oChild = this.MonthList.childNodes[i];
 180            if(oChild.ItemValue || oChild.ItemValue == 0){
 181                if(oChild.ItemValue == this.MonthDrop.MonthValue){
 182                    oChild.style.fontWeight = "bold";
 183                }else{
 184                    oChild.style.fontWeight = "normal";
 185                }
 186            }
 187        }
 188    }
 189    //
 190    this.RefreshYearList = function(){
 191        this.HideYearList();
 192
 193        var startYear = this.YearDrop.YearValue - 3;
 194        for(var i=0;i<this.YearListItem.length;i++){
 195            this.YearListItem[i].innerHTML = startYear;
 196            this.YearListItem[i].ItemValue = startYear;
 197            if(this.YearListItem[i].ItemValue == this.YearDrop.YearValue){
 198                this.YearListItem[i].style.fontWeight = "bold";
 199            }else{
 200                this.YearListItem[i].style.fontWeight = "normal";
 201            }
 202            startYear++;
 203        }
 204    }
 205    //create the year list
 206    this.CreateYearList = function(){
 207        if(!this.YearList){
 208            var yearScrollSpeed = 30;
 209            var yearList = document.createElement("div");
 210            yearList.style.position = "absolute";
 211            yearList.style.overflow = "visible";
 212            yearList.style.left = 330;
 213            yearList.style.top = 20;
 214            yearList.style.zIndex = 999;
 215            yearList.style.padding = "0px 0px 0px 0px";
 216            yearList.style.borderStyle = "solid";
 217            yearList.style.borderWidth = "1px";
 218            yearList.style.borderColor = this.ListBorderColor;
 219            yearList.style.width = "50px";
 220            yearList.style.textAlign = "center";
 221            yearList.style.fontFamily = "arial";
 222            yearList.style.fontSize = "12px";
 223            yearList.style.fontWeight = "normal";
 224            yearList.style.color = this.ListTextColor;
 225            yearList.style.cursor = "pointer";
 226            yearList.style.backgroundColor = this.ListBgColor;
 227
 228
 229
 230            var yearItemDec = document.createElement("div");
 231            yearItemDec.Instance = this;
 232            yearItemDec.innerHTML = "-";
 233            yearItemDec.style.backgroundColor = "transparent";
 234
 235            yearItemDec.onmouseover = function(){
 236                this.style.backgroundColor = this.Instance.ListItemBgColorOver;
 237            }
 238            yearItemDec.onmouseout = function(){
 239                this.style.backgroundColor = "transparent";
 240            }
 241            yearItemDec.onmousedown = function(){
 242                this.intervalID = setInterval("XCtrlLib.XCalendar.DecreaseYear('this.Instance')",yearScrollSpeed);
 243            }
 244            yearItemDec.onmouseup = function(){
 245                clearInterval(this.intervalID);
 246            }
 247            yearList.appendChild(yearItemDec);
 248
 249            var startYear = this.YearDrop.YearValue - 3;
 250            for(var i=0;i<7;i++){
 251                var yearItem = document.createElement("div");
 252                yearItem.Instance = this;
 253                yearItem.innerHTML = startYear + i;
 254                yearItem.ItemValue = startYear + i;
 255                this.YearListItem.push(yearItem);
 256                yearItem.style.border = "none";
 257                yearItem.style.width = "100%";
 258                yearItem.style.backgroundColor = "transparent";
 259
 260                if(yearItem.ItemValue == this.YearDrop.YearValue){
 261                    yearItem.style.fontWeight = "bold";
 262                }else{
 263                    yearItem.style.fontWeight = "normal";
 264                }
 265
 266                yearItem.onmouseover = function(){
 267                    this.style.backgroundColor = this.Instance.ListItemBgColorOver;
 268                }
 269                yearItem.onmouseout = function(){
 270                    this.style.backgroundColor = "transparent";
 271                }
 272                yearItem.onclick = function(){
 273                    var month = this.Instance.CurrDate.getMonth();
 274                    var date = this.Instance.CurrDate.getDate();
 275                    this.Instance.CurrDate = new Date(this.ItemValue,month,date);
 276                    this.Instance.RefreshCalendar(this.Instance.CurrDate,this.Instance.ValueControl,this.DateSeparator,true);
 277                    this.Instance.HideYearList();
 278                }
 279                yearList.appendChild(yearItem);
 280            }
 281
 282            var yearItemInc = document.createElement("div");
 283            yearItemInc.Instance = this;
 284            yearItemInc.innerHTML = "+";
 285            yearItemInc.style.backgroundColor = "transparent";
 286            yearItemInc.onmouseover = function(){
 287                this.style.backgroundColor = this.Instance.ListItemBgColorOver;
 288            }
 289            yearItemInc.onmouseout = function(){
 290                this.style.backgroundColor = "transparent";
 291            }
 292            yearItemInc.onmousedown = function(){
 293                this.intervalID = setInterval("XCtrlLib.XCalendar.IncreaseYear('this.Instance')",yearScrollSpeed);
 294            }
 295            yearItemInc.onmouseup = function(){
 296                clearInterval(this.intervalID);
 297            }
 298            yearList.appendChild(yearItemInc);
 299
 300            this.YearList = yearList;
 301        }
 302    }
 303    //create the month list
 304    this.CreateMonthList = function(){
 305        if(!this.MonthList){
 306            var monthList = document.createElement("div");
 307            monthList.style.position = "absolute";
 308            monthList.style.overflow = "visible";
 309            monthList.style.left = 280;
 310            monthList.style.top = 20;
 311            monthList.style.zIndex = 999;
 312            monthList.style.padding = "0px 0px 0px 0px";
 313            monthList.style.borderStyle = "solid";
 314            monthList.style.borderWidth = "1px";
 315            monthList.style.borderColor = this.ListBorderColor;
 316            monthList.style.width = "50px";
 317            monthList.style.textAlign = "center";
 318            monthList.style.fontFamily = "arial";
 319            monthList.style.fontSize = "12px";
 320            monthList.style.fontWeight = "normal";
 321            monthList.style.color = this.ListTextColor;
 322            monthList.style.cursor = "pointer";
 323            monthList.style.backgroundColor = this.ListBgColor;
 324
 325            for(var i=0;i<this.ArrMonthName.length;i++){
 326                var monthItem = document.createElement("div");
 327                monthItem.Instance = this;
 328                monthItem.innerHTML = this.ArrMonthName[i];
 329                monthItem.ItemValue = i;
 330                monthItem.style.border = "none";
 331                monthItem.style.width = "100%";
 332                monthItem.style.backgroundColor = "transparent";
 333                if(monthItem.ItemValue == this.MonthDrop.MonthValue){
 334                    monthItem.style.fontWeight = "bold";
 335                }else{
 336                    monthItem.style.fontWeight = "normal";
 337                }
 338
 339                monthItem.onmouseover = function(){
 340                    this.style.backgroundColor = this.Instance.ListItemBgColorOver;
 341                }
 342                monthItem.onmouseout = function(){
 343                    this.style.backgroundColor = "transparent";
 344                }
 345                monthItem.onclick = function(){
 346                    var year = this.Instance.CurrDate.getFullYear();
 347                    var date = this.Instance.CurrDate.getDate();
 348                    this.Instance.CurrDate = new Date(year,this.ItemValue,date);
 349                    this.Instance.RefreshCalendar(this.Instance.CurrDate,this.Instance.ValueControl,this.DateSeparator,true);
 350                }
 351                monthList.appendChild(monthItem);
 352            }
 353
 354            this.MonthList = monthList;
 355        }
 356    }
 357    //
 358    this.CreateBody = function(oDate,oValue){
 359        this.ValueControl = oValue;
 360
 361        if(!this.BodyTable){
 362            var oTable = document.createElement("TABLE");
 363            var oRow = oTable.insertRow(-1);
 364            var oCellWeek = oRow.insertCell(-1);
 365            var oCellDivider = oRow.insertCell(-1);
 366
 367            oTable.style.borderWidth = 0;
 368            oTable.style.width = "100%";
 369            oTable.style.textAlign = "right";
 370
 371            oCellWeek.style.color = this.WeekTitleTextColor;
 372            oCellWeek.style.fontFamily = "verdana";
 373            oCellWeek.style.fontSize = "12px";
 374            oCellWeek.style.fontWeight = "bold";
 375            oCellWeek.innerHTML = "周";
 376
 377            oCellDivider.style.width = "1px";
 378            oCellDivider.style.backgroundColor = this.WeekDividerColor;
 379            oCellDivider.style.padding = "0px";
 380            oCellDivider.rowSpan = 7;
 381            oCellDivider.innerHTML = "<img src='divider.gif' width='1'>";
 382
 383            var theYear = oDate.getFullYear();
 384            var theMonth = oDate.getMonth();
 385            var theDate = oDate.getDate();
 386
 387            var monthDays = new Array(31,28,31,30,31,30,31,31,30,31,30,31);
 388            //确定二月的天数，是闰年则二月份为29天
 389            if(theYear%4==0 && ((theYear%100!=0)||(theYear%400==0)))
 390                monthDays[1] = 29;
 391
 392            //星期栏
 393            for(var i=0;i<7;i++){
 394                var oCell = oRow.insertCell(-1);
 395                oCell.style.color = this.WeekTitleTextColor;
 396                oCell.style.fontFamily = "verdana";
 397                oCell.style.fontSize = "12px";
 398                oCell.style.fontWeight = "bold";
 399                oCell.innerHTML = this.ArrDayName[i];
 400                oCell.title = "星期" + this.ArrDayName[i];
 401            }
 402            //日期
 403            var blankNum = new Date(theYear,theMonth,1).getDay();
 404            for(var i=0;i<monthDays[theMonth]+blankNum;i++){
 405                var oRow;
 406                var dateNum = i + 1 - blankNum;
 407                //如果i为7的倍数则插入一行，并插入周数单元格
 408                if(i%7 == 0){
 409                    oRow = oTable.insertRow(-1);
 410                    var oCellWeek = oRow.insertCell(-1);
 411                    var firstDateOfWeek = new Date(theYear,theMonth,dateNum);
 412                    oCellWeek.style.color = this.WeekCountTextColor;
 413                    oCellWeek.style.borderStyle = "solid";
 414                    oCellWeek.style.borderWidth = "1px";
 415                    oCellWeek.style.borderColor = this.ItemBorderColor;
 416                    oCellWeek.style.fontFamily = "verdana";
 417                    oCellWeek.style.fontSize = "12px";
 418                    oCellWeek.style.fontWeight = "normal";
 419                    oCellWeek.style.textAlign = "right";
 420                    oCellWeek.style.padding = "0px 3px 0px 3px";
 421                    oCellWeek.style.margin = "0px";
 422                    var weekNum = firstDateOfWeek.getWeek();
 423                    oCellWeek.innerHTML = weekNum;
 424                    oCellWeek.title = "第" + weekNum + "周";
 425                }
 426
 427                var oCell = oRow.insertCell(-1);
 428                var oSpan = document.createElement("span");
 429                oCell.appendChild(oSpan);
 430                oSpan.style.color = this.ItemTextColor;
 431                oSpan.style.borderStyle = "solid";
 432                oSpan.style.borderWidth = "1px";
 433                oSpan.style.borderColor = this.ItemBorderColor;
 434                oSpan.style.fontFamily = "verdana";
 435                oSpan.style.fontSize = "12px";
 436                oSpan.style.fontWeight = "normal";
 437                oSpan.style.textAlign = "right";
 438                oSpan.style.padding = "0px 3px 0px 3px";
 439                oSpan.style.margin = "0px";
 440                oSpan.style.cursor = "pointer";
 441
 442                oSpan.Instance = this;
 443
 444                if(dateNum <= 0)
 445                    oSpan.innerHTML = "";
 446                else{
 447                    var today = new Date();
 448                    if(theYear == today.getFullYear() && theMonth == today.getMonth() && dateNum == today.getDate())
 449                        oSpan.IsToday = true;
 450                    if(this.SelectedDate && this.SelectedDate.getFullYear() == this.YearDrop.YearValue && this.SelectedDate.getMonth() == this.MonthDrop.MonthValue && this.SelectedDate.getDate() == dateNum){
 451                        oSpan.IsSelectedDate = true;
 452                    }
 453                    if(i%7 == 0)
 454                        oSpan.IsHoliday = true;
 455
 456                    oSpan.innerHTML = dateNum;
 457                    oSpan.DateValue = dateNum;
 458                    oSpan.title = "" + this.YearDrop.YearValue + "年" + (this.MonthDrop.MonthValue + 1) + "月" + dateNum + "日";
 459                    //设置日期span样式
 460                    if(oSpan.IsSelectedDate && oSpan.IsToday){
 461                        oSpan.style.borderColor = this.ItemBorderColorOver;
 462                        oSpan.style.color = this.TodayTextColor;
 463                        oSpan.style.fontWeight = "bold";
 464                    }else if(oSpan.IsSelectedDate){
 465                        oSpan.style.borderColor = this.ItemBorderColorOver;
 466                    }else if(oSpan.IsToday){
 467                        oSpan.style.color = this.TodayTextColor;
 468                        oSpan.style.fontWeight = "bold";
 469                    }else if(oSpan.IsHoliday){
 470                        oSpan.style.color = this.HolidayTextColor;
 471                    }
 472                    //日期事件
 473                    oSpan.onmouseover = function(){
 474                        this.style.borderColor = this.Instance.ItemBorderColorOver;
 475                    }
 476                    oSpan.onmouseout = function(){
 477                        if(this.IsSelectedDate){
 478                            this.style.borderColor = this.Instance.ItemBorderColorOver;
 479                        }else{
 480                            this.style.borderColor = this.Instance.ItemBorderColor;
 481                        }
 482                    }
 483                    oSpan.onclick = function(){
 484                        this.Instance.CurrDate = new Date(this.Instance.YearDrop.YearValue,this.Instance.MonthDrop.MonthValue,this.DateValue);
 485                        this.Instance.SetControlDate(this.Instance.CurrDate,this.Instance.ValueControl);
 486                        this.Instance.HideCalendar();
 487                    }
 488                }
 489            }
 490
 491            this.BodyTable = oTable;
 492        }
 493    }
 494    //create calendar header table
 495    this.CreateHeader = function(){
 496        if(!this.Header){
 497            var oTable = document.createElement("TABLE");
 498            var oRow = oTable.insertRow(-1);
 499
 500            oTable.cellSpacing = "2";
 501            oTable.cellPadding = "0";
 502            oTable.style.color = this.HeaderTextColor;
 503            oTable.style.fontFamily = "arial";
 504            oTable.style.fontSize = "12px";
 505            oTable.style.fontWeight = "bold";
 506            oTable.style.textAlign = "center";
 507            oTable.style.verticalAlign = "middle";
 508
 509            this.CreatePrevButton();
 510            this.CreateNextButton();
 511            this.CreateMonthDrop();
 512            this.CreateYearDrop();
 513            this.CreateClearButton();
 514            this.CreateCloseButton();
 515
 516            oRow.appendChild(this.PrevButton);
 517            oRow.appendChild(this.NextButton);
 518            oRow.appendChild(this.MonthDrop);
 519            oRow.appendChild(this.YearDrop);
 520            oRow.appendChild(this.ClearButton);
 521
 522            this.FrameTable.CellClose.appendChild(this.CloseButton);
 523
 524            this.Header = oTable;
 525        }
 526    }
 527    //create month dropdown
 528    this.CreateMonthDrop = function(){
 529        if(!this.MonthDrop){
 530            var month = this.CurrDate.getMonth();
 531            var oBtn = document.createElement("td");
 532            oBtn.style.borderStyle = "solid";
 533            oBtn.style.borderWidth = "1px";
 534            oBtn.style.borderColor = this.HeaderItemBorderColor;
 535            oBtn.style.cursor = "pointer";
 536            oBtn.title = "选择月份";
 537            oBtn.innerHTML = "&nbsp;" + this.ArrMonthName[month] + "&nbsp;<img src='" + this.Icon[2].src + "' align='absmiddle'>";
 538            oBtn.MonthValue = month;
 539            oBtn.Instance = this;
 540            oBtn.Poped = false;
 541            oBtn.onmouseover = function(){
 542                this.style.borderColor = this.Instance.HeaderItemBorderColorOver;
 543            }
 544            oBtn.onmouseout = function(){
 545                this.style.borderColor = this.Instance.HeaderItemBorderColor;
 546            }
 547            oBtn.onclick = function(){
 548                var pos = GetPosition(this,this.Instance.Calendar);
 549                this.Instance.MonthList.style.width = this.offsetWidth;
 550                this.Instance.MonthList.style.left = pos[0];
 551                this.Instance.MonthList.style.top = pos[1] + this.offsetHeight;
 552                this.Instance.HideYearList();
 553                if(this.Poped)
 554                    this.Instance.HideMonthList();
 555                else
 556                    this.Instance.ShowMonthList();
 557            }
 558            this.MonthDrop = oBtn;
 559        }
 560    }
 561    //create year dropdown
 562    this.CreateYearDrop = function(){
 563        if(!this.YearDrop){
 564            var year = this.CurrDate.getFullYear();
 565            var oBtn = document.createElement("td");
 566            oBtn.style.borderStyle = "solid";
 567            oBtn.style.borderWidth = "1px";
 568            oBtn.style.borderColor = this.HeaderItemBorderColor;
 569            oBtn.style.cursor = "pointer";
 570            oBtn.title = "选择年份";
 571            oBtn.innerHTML = "&nbsp;" + year + "&nbsp;<img src='" + this.Icon[2].src + "' align='absmiddle'>";
 572            oBtn.YearValue = year;
 573            oBtn.Instance = this;
 574            oBtn.Poped = false;
 575            oBtn.onmouseover = function(){
 576                this.style.borderColor = this.Instance.HeaderItemBorderColorOver;
 577            }
 578            oBtn.onmouseout = function(){
 579                this.style.borderColor = this.Instance.HeaderItemBorderColor;
 580            }
 581            oBtn.onclick = function(){
 582                var pos = GetPosition(this,this.Instance.Calendar);
 583                this.Instance.YearList.style.width = this.offsetWidth;
 584                this.Instance.YearList.style.left = pos[0];
 585                this.Instance.YearList.style.top = pos[1] + this.offsetHeight;
 586                this.Instance.HideMonthList();
 587                if(this.Poped)
 588                    this.Instance.HideYearList();
 589                else
 590                    this.Instance.ShowYearList();
 591            }
 592            this.YearDrop = oBtn;
 593        }
 594    }
 595    //create previous month button
 596    this.CreatePrevButton = function(){
 597        if(!this.PrevButton){
 598            var oBtn = document.createElement("td");
 599            oBtn.Instance = this;
 600            oBtn.style.borderStyle = "solid";
 601            oBtn.style.borderWidth = "1px";
 602            oBtn.style.borderColor = this.HeaderItemBorderColor;
 603            oBtn.style.cursor = "pointer";
 604            oBtn.title = "上月";
 605            oBtn.innerHTML = "&nbsp;<img src='" + this.Icon[0].src + "' align='absmiddle'>&nbsp;";
 606            oBtn.onmouseover = function(){
 607                this.style.borderColor = this.Instance.HeaderItemBorderColorOver;
 608            }
 609            oBtn.onmouseout = function(){
 610                this.style.borderColor = this.Instance.HeaderItemBorderColor;
 611            }
 612            oBtn.onclick = function(){
 613                var year = this.Instance.CurrDate.getFullYear();
 614                var month = this.Instance.CurrDate.getMonth() - 1;
 615                var date = this.Instance.CurrDate.getDate();
 616                this.Instance.CurrDate = new Date(year,month,date);
 617                this.Instance.RefreshCalendar(this.Instance.CurrDate,this.Instance.ValueControl,this.DateSeparator,true);
 618            }
 619            this.PrevButton = oBtn;
 620        }
 621    }
 622    //create next month button
 623    this.CreateNextButton = function(){
 624        if(!this.NextButton){
 625            var oBtn = document.createElement("td");
 626            oBtn.Instance = this;
 627            oBtn.style.borderStyle = "solid";
 628            oBtn.style.borderWidth = "1px";
 629            oBtn.style.borderColor = this.HeaderItemBorderColor;
 630            oBtn.style.cursor = "pointer";
 631            oBtn.title = "下月";
 632            oBtn.innerHTML = "&nbsp;<img src='" + this.Icon[1].src + "' align='absmiddle'>&nbsp;";
 633            oBtn.onmouseover = function(){
 634                this.style.borderColor = this.Instance.HeaderItemBorderColorOver;
 635            }
 636            oBtn.onmouseout = function(){
 637                this.style.borderColor = this.Instance.HeaderItemBorderColor;
 638            }
 639            oBtn.onclick = function(){
 640                var year = this.Instance.CurrDate.getFullYear();
 641                var month = this.Instance.CurrDate.getMonth() + 1;
 642                var date = this.Instance.CurrDate.getDate();
 643                this.Instance.CurrDate = new Date(year,month,date);
 644                this.Instance.RefreshCalendar(this.Instance.CurrDate,this.Instance.ValueControl,this.DateSeparator,true);
 645            }
 646            this.NextButton = oBtn;
 647        }
 648    }
 649    //create clear button
 650    this.CreateClearButton = function(){
 651        if(!this.ClearButton){
 652            var oBtn = document.createElement("td");
 653            oBtn.Instance = this;
 654            oBtn.style.borderStyle = "solid";
 655            oBtn.style.borderWidth = "1px";
 656            oBtn.style.borderColor = this.HeaderItemBorderColor;
 657            oBtn.style.cursor = "pointer";
 658            oBtn.title = "清空";
 659            oBtn.innerHTML = "&nbsp;清空&nbsp;";
 660            oBtn.onmouseover = function(){
 661                this.style.borderColor = this.Instance.HeaderItemBorderColorOver;
 662            }
 663            oBtn.onmouseout = function(){
 664                this.style.borderColor = this.Instance.HeaderItemBorderColor;
 665            }
 666            oBtn.onclick = function(){
 667                this.Instance.ValueControl.value = "";
 668                this.Instance.HideCalendar();
 669            }
 670            this.ClearButton = oBtn;
 671        }
 672    }
 673    //create close button
 674    this.CreateCloseButton = function(){
 675        if(!this.CloseButton){
 676            var oTable = document.createElement("TABLE");
 677            var oRow = oTable.insertRow(-1);
 678            var oCell = oRow.insertCell(-1);
 679            oCell.Instance = this;
 680
 681            oTable.cellSpacing = "2";
 682            oTable.cellPadding = "0";
 683            oTable.style.fontFamily = "arial";
 684            oTable.style.fontSize = "12px";
 685            oTable.style.fontWeight = "bold";
 686            oTable.style.textAlign = "center";
 687            oTable.style.verticalAlign = "middle";
 688            oCell.style.backgroundColor = this.CloseBgColor;
 689            oCell.style.borderStyle = "solid";
 690            oCell.style.borderWidth = "1px";
 691            oCell.style.borderColor = this.CloseBorderColor;
 692            oCell.style.cursor = "pointer";
 693            oCell.title = "关闭日历";
 694            oCell.innerHTML = "&nbsp;<img src='" + this.Icon[3].src + "' align='absmiddle'>&nbsp;";
 695            oCell.onmouseover = function(){
 696                this.style.backgroundColor = this.Instance.CloseBgColorOver;
 697                this.style.borderColor = this.Instance.CloseBorderColorOver;
 698            }
 699            oCell.onmouseout = function(){
 700                this.style.backgroundColor = this.Instance.CloseBgColor;
 701                this.style.borderColor = this.Instance.CloseBorderColor;
 702            }
 703            oCell.onclick = function(){
 704                this.Instance.HideCalendar();
 705            }
 706            this.CloseButton = oTable;
 707        }
 708    }
 709    //create calendar footer
 710    this.CreateFooter = function(){
 711        if(!this.Footer){
 712            var oTable = document.createElement("TABLE");
 713            var oRow = oTable.insertRow(-1);
 714            var oCell01 = oRow.insertCell(-1);
 715            var oSpan = document.createElement("span");
 716            oCell01.appendChild(oSpan);
 717
 718            oTable.style.borderCollapse = "collapse";
 719            oTable.style.border = "none";
 720            oTable.style.color = this.FooterTextColor;
 721            oTable.style.backgroundColor = this.FooterBgColor;
 722            oTable.style.fontFamily = "arial";
 723            oTable.style.fontSize = "12px";
 724            oTable.style.fontWeight = "normal";
 725            oTable.style.textAlign = "center";
 726            oTable.style.verticalAlign = "middle";
 727            oTable.style.width = "100%";
 728            oTable.style.height = "25px";
 729
 730            oSpan.style.border = "none";
 731            oSpan.style.cursor = "pointer";
 732            oSpan.title="设置为今天日期";
 733
 734            oSpan.Instance = this;
 735
 736            var today = new Date();
 737            oSpan.innerHTML = "&nbsp;今天是 " + today.getFullYear() + "年" + (today.getMonth() + 1) + "月" + today.getDate() + "日 星期" + this.ArrDayName[today.getDay()] + "&nbsp;";
 738
 739            oSpan.onmouseover = function(){
 740                this.style.borderStyle = "solid";
 741                this.style.borderWidth = "1px";
 742                this.style.borderColor = this.Instance.FooterItemBorderColorOver;
 743            }
 744            oSpan.onmouseout = function(){
 745                this.style.border = "none";
 746            }
 747            oSpan.onclick = function(){
 748                this.Instance.CurrDate = new Date();
 749                this.Instance.SetControlDate(this.Instance.CurrDate,this.Instance.ValueControl);
 750                this.Instance.HideCalendar();
 751            }
 752
 753            this.Footer = oTable;
 754        }
 755    }
 756    //create calendar container
 757    this.CreateOutLine = function(){
 758        if(!this.Calendar){
 759            var calendar = document.createElement("div");
 760            calendar.style.position = "absolute";
 761            calendar.style.overflow = "visible";
 762            calendar.style.left = 0;
 763            calendar.style.top = 0;
 764            calendar.style.zIndex = 999;
 765            calendar.style.backgroundColor = this.BgColor;
 766            calendar.style.borderStyle = "solid";
 767            calendar.style.borderWidth = "1px";
 768            calendar.style.borderColor = this.BorderColor;
 769            calendar.style.padding = "1px";
 770            calendar.style.margin = "0px";
 771            calendar.style.width = "260px";
 772            calendar.style.cursor = "default";
 773            calendar.onclick = function(evt){
 774                if(!evt) evt = window.event;
 775                evt.cancelBubble = true;
 776            }
 777            this.Calendar = calendar;
 778        }
 779    }
 780    //create calendar frame table
 781    this.CreateFrameTable = function(){
 782        if(!this.FrameTable){
 783            var oTable = document.createElement("TABLE");
 784            var oRowHeader = oTable.insertRow(-1);
 785            var oCellHeader = oRowHeader.insertCell(-1);
 786            var oCellClose = oRowHeader.insertCell(-1);
 787            var oRowBody = oTable.insertRow(-1);
 788            var oCellBody = oRowBody.insertCell(-1);
 789            var oRowFooter = oTable.insertRow(-1);
 790            var oCellFooter = oRowFooter.insertCell(-1);
 791            var oDivBody = document.createElement("div");
 792            oCellBody.appendChild(oDivBody);
 793
 794            oTable.cellSpacing = 0;
 795            oTable.cellPadding = 0;
 796            oTable.style.borderCollapse = "collapse";
 797            oTable.style.border = "none";
 798            oTable.style.width = "100%";
 799
 800            oRowHeader.style.backgroundColor = this.HeaderBgColor;
 801            oRowHeader.style.height = "25px";
 802            oCellHeader.align = "left";
 803            oCellClose.align = "right";
 804
 805            oCellBody.colSpan = "2";
 806            if(!XBrowserInfo.IsGeckoLike){
 807                oDivBody.style.width = "100%";
 808            }
 809            oDivBody.style.padding = "0px 5px 0px 0px";
 810            oDivBody.style.backgroundColor = this.BodyBgColor;
 811
 812            oCellFooter.colSpan = "2";
 813
 814            oTable.CellHeader = oCellHeader;
 815            oTable.CellClose = oCellClose;
 816            oTable.DivBody = oDivBody;
 817            oTable.CellFooter = oCellFooter;
 818
 819            this.FrameTable = oTable;
 820        }
 821    }
 822    //
 823    XCtrlLib.XCalendar.IncreaseYear = function(calendar){
 824        var inst = eval(calendar);
 825        if(!inst.YearListStartYear)
 826            inst.YearListStartYear = inst.YearDrop.YearValue-3;
 827        
 828        for(var i=0;i<inst.YearListItem.length;i++){
 829            var newYear = (inst.YearListStartYear + i) + 1;
 830            inst.YearListItem[i].innerHTML = newYear;
 831            inst.YearListItem[i].ItemValue = newYear;
 832            if(inst.YearListItem[i].ItemValue == inst.YearDrop.YearValue){
 833                inst.YearListItem[i].style.fontWeight = "bold";
 834            }else{
 835                inst.YearListItem[i].style.fontWeight = "normal";
 836            }
 837        }
 838        inst.YearListStartYear ++;
 839    }
 840    //
 841    XCtrlLib.XCalendar.DecreaseYear = function(calendar){
 842        var inst = eval(calendar);
 843        if(!inst.YearListStartYear)
 844            inst.YearListStartYear = inst.YearDrop.YearValue-3;
 845
 846        for(var i=0;i<inst.YearListItem.length;i++){
 847            var newYear = (inst.YearListStartYear + i) - 1;
 848            inst.YearListItem[i].innerHTML = newYear;
 849            inst.YearListItem[i].ItemValue = newYear;
 850            if(inst.YearListItem[i].ItemValue == inst.YearDrop.YearValue){
 851                inst.YearListItem[i].style.fontWeight = "bold";
 852            }else{
 853                inst.YearListItem[i].style.fontWeight = "normal";
 854            }
 855        }
 856        inst.YearListStartYear --;
 857    }
 858    //
 859    this.SetControlDate = function(oDate,oValue){
 860        var strYear = oDate.getFullYear().toString();
 861        var strMonth = (oDate.getMonth() + 1).toString();
 862        var strDate = oDate.getDate().toString();
 863        if(strMonth.length < 2)
 864            strMonth = "0" + strMonth;
 865        if(strDate.length < 2)
 866            strDate = "0" + strDate;
 867        oValue.value = strYear + this.DateSeparator + strMonth + this.DateSeparator + strDate;
 868    }
 869    //get the position of a object
 870    function GetPosition(obj,relativeParentObj){
 871        var left = 0;
 872        var top = 0;
 873        var objRel = null;
 874
 875        if(relativeParentObj)
 876            objRel = relativeParentObj
 877
 878        if(obj.offsetParent){
 879            while(obj.offsetParent != objRel){
 880                left += obj.offsetLeft;
 881                top += obj.offsetTop;
 882                obj = obj.offsetParent;
 883            }
 884        }else if(obj.x){
 885            left += obj.x;
 886            top += obj.y;
 887        }
 888        return ([left,top]);
 889    }
 890    //hides <select> and <applet> objects (for IE only)
 891    function HideElement(elmID,overDiv){
 892        if(!XBrowserInfo.IsGeckoLike){
 893            var overDivPos = GetPosition(overDiv);
 894            for(i=0;i<document.all.tags(elmID).length;i++){
 895                obj = document.all.tags(elmID)[i];
 896                var objPos = GetPosition(obj);
 897                if(objPos[0]+obj.offsetWidth < overDivPos[0]){}
 898                else if(objPos[0] > overDivPos[0]+overDiv.offsetWidth){}
 899                else if(objPos[1]+obj.offsetHeight < overDivPos[1]){}
 900                else if(objPos[1] > overDivPos[1]+overDiv.offsetHeight){}
 901                else{
 902                    obj.style.visibility = "hidden";
 903                }
 904            }
 905        }
 906    }
 907    //unhides <select> and <applet> objects (for IE only)
 908    function ShowElement(elmID)
 909    {
 910        if(!XBrowserInfo.IsGeckoLike){
 911            for(i=0;i<document.all.tags(elmID).length;i++){
 912                obj = document.all.tags(elmID)[i];
 913                if(!obj || !obj.offsetParent){
 914                    continue;
 915                }
 916                obj.style.visibility = "visible";
 917            }
 918        }
 919    }
 920    //locate the calendar position
 921    this.Locate = function(obj){
 922        if(this.Popped){
 923            ShowElement("SELECT");
 924            ShowElement("APPLET");
 925        }
 926        var oTemp = obj;
 927        var pos = GetPosition(oTemp);
 928        var left = pos[0];
 929        var top = pos[1] + obj.offsetHeight;
 930        var docWidth = document.body.clientWidth;
 931        var docHeight = document.body.clientHeight;
 932
 933        if(left + this.Calendar.offsetWidth > docWidth && this.Calendar.offsetWidth < docWidth)
 934            left = pos[0] + obj.offsetWidth - this.Calendar.offsetWidth;
 935        if(top + this.Calendar.offsetHeight > docHeight && this.Calendar.offsetHeight < docHeight)
 936            top = pos[1] - this.Calendar.offsetHeight;
 937
 938        this.Calendar.style.left = left;
 939        this.Calendar.style.top = top;
 940    }
 941    //
 942    this.ShowYearList = function(){
 943        this.YearList.style.display = "block";
 944        this.YearDrop.Poped = true;
 945        this.YearListStartYear = this.CurrDate.getFullYear() - 3;
 946        HideElement("SELECT",this.YearList);
 947        HideElement("APPLET",this.YearList);
 948    }
 949    this.HideYearList = function(){
 950        this.YearList.style.display = "none";
 951        this.YearDrop.Poped = false;
 952        this.YearListStartYear = null;
 953    }
 954    this.ShowMonthList = function(){
 955        this.MonthList.style.display = "block";
 956        this.MonthDrop.Poped = true;
 957        HideElement("SELECT",this.MonthList);
 958        HideElement("APPLET",this.MonthList);
 959    }
 960    this.HideMonthList = function(){
 961        this.MonthList.style.display = "none";
 962        this.MonthDrop.Poped = false;
 963    }
 964    //show the calendar
 965    this.ShowCalendar = function(){
 966        this.Calendar.style.visibility = "visible";
 967        this.Popped = true;
 968        HideElement("SELECT",this.Calendar);
 969        HideElement("APPLET",this.Calendar);
 970    }
 971    //hide the calendar
 972    this.HideCalendar = function(){
 973        this.HideMonthList();
 974        this.HideYearList();
 975        this.Calendar.style.visibility = "hidden";
 976        this.Popped = false;
 977        ShowElement("SELECT");
 978        ShowElement("APPLET");
 979    }
 980}
 981//
 982XCtrlLib.XCalendar.ParseDateString = function(dateStr,dateSeparator){
 983    dateStr = dateStr.trim();
 984    if(!dateSeparator)
 985        dateSeparator = "-";
 986    var oDate = null;
 987    var arr = dateStr.split(dateSeparator);
 988    var year = parseInt(arr[0],10);
 989    var month = parseInt(arr[1],10)-1;
 990    var date = parseInt(arr[2],10);
 991
 992    if(arr.length == 3 && !isNaN(year) && !isNaN(month) && !isNaN(date)){
 993        oDate = new Date(year,month,date);
 994    }else{
 995        if(dateStr != "")
 996            alert("日期格式错误，只接受【YYYY" + dateSeparator + "MM" + dateSeparator + "DD】格式的日期。");
 997    }
 998    return oDate;
 999}
1000//the pop trigger of the calendar
1001XCtrlLib.XCalendar.Pop = function(oEventSrc,oValue,dateSeparator,imgPrevUrl,imgNextUrl,imgDropUrl,imgCloseUrl) 
1002{
1003    var oDate;
1004    if(typeof(oEventSrc) == "string")
1005        oEventSrc = document.getElementById(oEventSrc);
1006    if(typeof(oValue) == "string")
1007        oValue = document.getElementById(oValue);
1008    if(!dateSeparator)
1009        dateSeparator = "-";
1010    var dateStr = oValue.value;
1011    var oDate = XCtrlLib.XCalendar.ParseDateString(dateStr,dateSeparator);
1012
1013    if(!imgPrevUrl)
1014        imgPrevUrl = "";
1015    if(!imgNextUrl)
1016        imgNextUrl = "";
1017    if(!imgDropUrl)
1018        imgDropUrl = "";
1019    if(!imgCloseUrl)
1020        imgCloseUrl = "";
1021
1022    //如果实例不存在则构造之
1023    if(typeof(XCtrlLib.XCalendar.Instance) == "undefined"){
1024        XCtrlLib.XCalendar.Instance = new XCtrlLib.XCalendar();
1025        XCtrlLib.XCalendar.Instance.Init(oDate,oValue,dateSeparator,imgPrevUrl,imgNextUrl,imgDropUrl,imgCloseUrl);
1026        document.body.appendChild(XCtrlLib.XCalendar.Instance.Calendar);
1027    }else{
1028        XCtrlLib.XCalendar.Instance.RefreshCalendar(oDate,oValue,dateSeparator);
1029    }
1030    //如果事件源没变则切换日历的显示状态，否则将其移至新填充值的控件位置并显示日历
1031    if(XCtrlLib.XCalendar.Instance.SrcObj == oEventSrc){
1032        if(XCtrlLib.XCalendar.Instance.Popped){
1033            XCtrlLib.XCalendar.Instance.HideCalendar();
1034        }else{
1035            XCtrlLib.XCalendar.Instance.Locate(oValue);
1036            XCtrlLib.XCalendar.Instance.ShowCalendar();
1037        }
1038    }else{
1039        XCtrlLib.XCalendar.Instance.Locate(oValue);
1040        XCtrlLib.XCalendar.Instance.ShowCalendar();
1041    }
1042
1043    XCtrlLib.XCalendar.Instance.SrcObj = oEventSrc;
1044    XCtrlLib.XCalendar.Instance.blnClickOut = false;
1045
1046    //点击文档别处则隐藏日历
1047    document.onclick = function(){
1048        if(XCtrlLib.XCalendar.Instance.blnClickOut){
1049            if(XCtrlLib.XCalendar.Instance.Popped){
1050                XCtrlLib.XCalendar.Instance.HideCalendar();
1051            }
1052        }
1053        XCtrlLib.XCalendar.Instance.blnClickOut = true;
1054    }
1055}
1056
1057//get the week number of a date
1058Date.prototype.getWeek = function(){
1059    var year = this.getFullYear();
1060    var month = this.getMonth() + 1;
1061    var date = this.getDate() + 1;
1062
1063    var a = Math.floor((14-month) / 12);
1064    var y = year + 4800 - a;
1065    m = month + 12 * a - 3;
1066    b = Math.floor(y/4) - Math.floor(y/100) + Math.floor(y/400);
1067    J = date + Math.floor((153 * m + 2) / 5) + 365 * y + b - 32045;
1068    d4 = (((J + 31741 - (J % 7)) % 146097) % 36524) % 1461;
1069    L = Math.floor(d4 / 1460);
1070    d1 = ((d4 - L) % 365) + L;
1071    week = Math.floor(d1/7) + 1;
1072
1073    return week;
1074}
1075//trim the head blank and tail blank of a string
1076String.prototype.trim = function(){
1077    return this.replace(/(^\s*)|(\s*$)/g, "");
1078}
1079//indicate whether contain the specified string in a string
1080String.prototype.Contains = function(str){
1081    return (this.indexOf(str) > -1);
1082}
1083var XBrowserInfo = {
1084    IsIE: navigator.userAgent.toLowerCase().Contains('msie'),
1085    IsIE7: navigator.userAgent.toLowerCase().Contains('msie 7'),
1086    IsGecko: navigator.userAgent.toLowerCase().Contains('gecko/'),
1087    IsSafari: navigator.userAgent.toLowerCase().Contains('safari'),
1088    IsOpera: navigator.userAgent.toLowerCase().Contains('opera')
1089}
1090XBrowserInfo.IsGeckoLike = XBrowserInfo.IsGecko||XBrowserInfo.IsSafari||XBrowserInfo.IsOpera;
1091

 

调用：

调用：
 1<html>
 2<head>
 3<title>XCldrNoCss</title>
 4<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
 5<script type="text/javascript" src="XCldrNoCss.js"></script>
 6<script type="text/javascript">
 7
 8</script>
 9</head> 
10<body style="margin:10px; color:#ff0000;">
11
12<form name="frm" method="post" action="testAction.htm">
13
14<input type="text" id="txtCldr" value="">
15<input type="button" id="btnPop" value="Pop Calendar" onclick="XCtrlLib.XCalendar.Pop(this,'txtCldr','-','XCldrImg/left.gif','XCldrImg/right.gif','XCldrImg/drop.gif','XCldrImg/close.gif');">
16
17<input type="text" id="txtCldr2" value="" onclick="XCtrlLib.XCalendar.Pop(this,this,'-','XCldrImg/left.gif','XCldrImg/right.gif','XCldrImg/drop.gif','XCldrImg/close.gif');">
18
19</form>
20</body> 
21</html> 
22

 

可将JS文件作为控件库资源包含，写一个日历控件（以WebResource.axd方式将JS资源发送到客户端）