今天寫了個javascript的日期控件，放上來以便日後查用(支持Firefox)：
1. UCtrl_Date.js文件

  1
  2
  3var siteName = "/Test2";//虛擬目錄名稱;只在顯示圖片(上一年，上一月，下一年，下一月)時有用
  4
  5//用戶控件日期
  6function UCtrlDate()
  7{
  8    this.ID = "UCtrlDate1";
  9    this.Width = "100%";
 10    this.Year = 0;
 11    this.Month = 0;
 12    this.Day = 0;
 13    this.Parent = document.body;    //容器
 14    this.EnableDay = 0;    //有效天數
 15    this.TWDate = true; //true表台灣日期, false表西元日期
 16    this.IsImg=true;//是否顯示圖片(上一年，上一月，下一年，下一月)
 17    this.currentTD = null;    //當前TD
 18    this.Value = GetDate;
 19    
 20    //定義圖片
 21    this.IMG_NextMonth_Enabled = siteName +"/images/right.gif";
 22    this.IMG_NextMonth = siteName +"/images/right1.gif";
 23    this.IMG_PreMonth_Enabled = siteName +"/images/left.gif";
 24    this.IMG_PreMonth = siteName +"/images/left1.gif";
 25    this.IMG_NextYear =  siteName +"/images/right.gif";
 26    this.IMG_PreYear = siteName +"/images/left.gif";
 27    //定義顏色
 28    this.CBG_Title = "#EEFFDD";    //標題背景色
 29    this.CF_Title = "#000000";//標題字體色
 30    this.CBG_Head = "#FFFFFF";//星期的背景色
 31    this.CF_Head = "#000000";//星期的字體色
 32    this.CBG_Body_Enabled = "#FFFFFF";//主體有效背景色
 33    this.CF_Body_Enabled = "#000000"//主體有效字體色
 34    this.CBG_Body = "#FFFFFF";//主體無效背景色
 35    this.CF_Body = "#CBCBCB"//主體無效字體色
 36    this.CBG_Selected = "#FFFF00";//當前被選中的背景色
 37    this.CF_Selected = "#000000";//當前被選中的字體色
 38    this.CBG_OnMouseOver = "#FFFF00"; //鼠標放上去的背景色
 39    //定義字體大小
 40    this.FZ_Title = "12px";//標題字體大小
 41    this.FZ_Head = "12px";//星期字體大小
 42    this.FZ_Body = "12px";//主體字體大小
 43    
 44    //代理
 45    this.OnClick = null;
 46
 47    Init(this,new Date());
 48    this.OnLoad = CreateTable;
 49}
 50
 51//初使化變量
 52function Init(sender,curDate)
 53{
 54    sender.Year = curDate.getFullYear();
 55    sender.Month = curDate.getMonth()+1
 56    sender.Day = curDate.getDate();
 57
 58}
 59
 60//創建主體表格
 61function CreateTable()
 62{
 63    var args = CreateTable.arguments;
 64    var sender = null;
 65    if(args.length==1) sender = args[0];
 66    else sender = this;
 67    
 68    var ctDate = new Date();
 69    if(sender.Year==0) sender.Year = ctDate.getFullYear();
 70    if(sender.Month==0) sender.Month = ctDate.getMonth()+1;
 71    if(sender.Day==0) sender.Day = ctDate.getDate();
 72
 73    var table = document.createElement("table");
 74    table.cellPadding=3;
 75    table.cellSpacing=0;
 76    table.rules="none";
 77    table.bordercolordark="#FFFFFF";
 78    table.borderColor = "#ebebeb";
 79    table.width = sender.Width;
 80    table.id = sender.ID + "_Table";
 81    table.border = 1;
 82    CreateCaption(sender,table);
 83    CreateHead(sender,table);
 84    CreateBody(sender,table);
 85    sender.Parent.appendChild(table);
 86}
 87
 88//創建標題
 89function CreateCaption(sender,table)
 90{
 91    var row = table.insertRow(table.rows.length);
 92    row.bgColor = sender.CBG_Title;
 93    row.style.height="22px";
 94    
 95    //上一年
 96    var cell = row.insertCell(0);
 97    cell.align = "center";
 98    cell.style.color = sender.CF_Title;
 99    cell.style.fontSize = sender.FZ_Title;
100    uctrlA = document.createElement("A");
101    uctrlA.href="javascript:";
102    uctrlA.PUCtrl = sender;
103    uctrlA.onclick = PreYear;
104    if(sender.EnableDay<=0)
105    {
106        if(!sender.IsImg) uctrlA.innerHTML = "上年";
107        else CreateIMG(uctrlA,sender.IMG_PreYear);
108    }
109    cell.appendChild(uctrlA);
110    //上一月
111    var cell1 = row.insertCell(1);
112    cell1.align = "center";
113    cell1.style.color = sender.CF_Title;
114    cell1.style.fontSize = sender.FZ_Title;
115    var pDate = new Date();
116    var preDate = new Date(sender.Year + "/" + sender.Month + "/" + pDate.getDate());
117    var isShow = false;
118    if(preDate>pDate) isShow = true;
119    if(sender.EnableDay<=0) isShow = true;
120    uctrlA = document.createElement("A");
121    uctrlA.href="javascript:";
122    uctrlA.PUCtrl = sender;
123    uctrlA.onclick = PreMonth;
124    if(isShow)
125    {
126        if(!sender.IsImg)  uctrlA.innerHTML = "上月";
127        else CreateIMG(uctrlA,sender.IMG_PreMonth_Enabled);
128        cell1.appendChild(uctrlA);
129    }
130    else 
131    {
132        if(!sender.IsImg) cell1.innerHTML =  "上月";
133        CreateIMG(uctrlA,sender.IMG_PreMonth);
134    }
135    //顯示年月日
136    cell = row.insertCell(2);
137    cell.align = "center";
138    cell.valign = "middle";
139    cell.colSpan = 3;
140    cell.style.color = sender.CF_Title;
141    cell.style.fontSize = sender.FZ_Title;
142    cell.PUCtrl = sender;
143    if(sender.TWDate)
144    {
145        var txtYear = "<input type='text'  onblur='GoYear(this);' size='3' style='height:18px;COLOR: " +sender.CF_Title + "; BACKGROUND-COLOR: " +sender.CBG_Title + "; BORDER-RIGHT: #ebebeb 1px solid; BORDER-TOP: #ebebeb 1px solid; BORDER-LEFT: #ebebeb 1px solid; BORDER-BOTTOM: #ebebeb 1px solid' value='" +  (sender.Year-1911) + "'>";
146        var txtMonth = "<input type='text' onblur='GoMonth(this);' size='1' style='height:18px;COLOR: #FF0000; BACKGROUND-COLOR: " +sender.CBG_Title + "; BORDER-RIGHT: #ebebeb 1px solid; BORDER-TOP: #ebebeb 1px solid; BORDER-LEFT: #ebebeb 1px solid; BORDER-BOTTOM: #ebebeb 1px solid' value='" + getMonthText(sender.Month) + "'>";
147        strHead = "民國" +  txtYear + "年 " + txtMonth + "月";
148        //strHead = "民國" +  (sender.Year-1911) + "年 " + getMonthText(sender.Month) + "月";
149    }
150    else
151    {
152        var txtYear = "<input type='text' onblur='GoYear(this);'' size='4' style='height:18px;COLOR: " +sender.CF_Title + "; BACKGROUND-COLOR: " +sender.CBG_Title + "; BORDER-RIGHT: #ebebeb 1px solid; BORDER-TOP: #ebebeb 1px solid; BORDER-LEFT: #ebebeb 1px solid; BORDER-BOTTOM: #ebebeb 1px solid' value='" +  (sender.Year) + "'>";
153        var txtMonth = "<input type='text' onblur='GoMonth(this);' size='2' style='height:18px;COLOR: #FF0000; BACKGROUND-COLOR: " +sender.CBG_Title + "; BORDER-RIGHT: #ebebeb 1px solid; BORDER-TOP: #ebebeb 1px solid; BORDER-LEFT: #ebebeb 1px solid; BORDER-BOTTOM: #ebebeb 1px solid' value='" + getMonthText(sender.Month) + "'>";
154        strHead = txtYear + " 年 " + txtMonth + "月";
155        //strHead =  sender.Year + " 年 " + getMonthText(sender.Month) + "月";
156    }
157    cell.innerHTML = strHead;
158    //下一月
159    cell = row.insertCell(3);
160    cell.align = "center";
161    cell.style.color = sender.CF_Title;
162    cell.style.fontSize = sender.FZ_Title;
163    var pDate = new Date();
164    var cpDate = new Date(addDate(4,sender.EnableDay,pDate));
165    var preDate = new Date(sender.Year + "/" + sender.Month + "/" + GetMaxDay(sender));//cpDate.getDate());
166    var isNextMonth = false;
167    if(preDate<cpDate) isNextMonth = true;
168    if(sender.EnableDay<=0) isNextMonth = true;
169    uctrlA = document.createElement("A");
170    uctrlA.href="javascript:";
171    uctrlA.PUCtrl = sender;
172    uctrlA.onclick = NextMonth;
173    if(isNextMonth)
174    {
175        if(!sender.IsImg)  uctrlA.innerHTML = "下月";
176        else CreateIMG(uctrlA,sender.IMG_NextMonth_Enabled);
177        cell.appendChild(uctrlA);
178    }
179    else 
180    {
181        if(!sender.IsImg)  cell.innerHTML = "下月";
182        CreateIMG(uctrlA,sender.IMG_NextMonth);
183    }
184    //下一年
185    cell = row.insertCell(4);
186    cell.align = "center";
187    cell.style.color = sender.CF_Title;
188    cell.style.fontSize = sender.FZ_Title;
189    uctrlA = document.createElement("A");
190    uctrlA.href="javascript:";
191    uctrlA.PUCtrl = sender;
192    uctrlA.onclick = NextYear;
193    if(sender.EnableDay<=0)
194    {
195        if(!sender.IsImg) uctrlA.innerHTML = "下年";
196        else CreateIMG(uctrlA,sender.IMG_NextYear);
197    }
198    cell.appendChild(uctrlA);
199}
200
201//創建星期
202function CreateHead(sender,table)
203{
204    var row = table.insertRow(table.rows.length);
205    row.bgColor = sender.CBG_Head;
206    for(var i=0;  i<7; i++)
207    {
208        var cell = row.insertCell(i);
209        cell.style.color = sender.CF_Head;
210        cell.style.fontSize = sender.FZ_Head;
211        cell.style.width = sender.Width/7;
212        cell.align = "center";
213        cell.innerHTML = WeekName(sender,i);
214    }
215}
216
217//創建主體
218function CreateBody(sender,table)
219{
220    var curDate = new Date(sender.Year + "/" + sender.Month + "/1" );
221    var swk = curDate.getDay(); //取得當前月的第一天是星期幾
222    var row = table.insertRow(table.rows.length);
223    var dayID = 1;
224    
225    //第一行
226    for(var i=0; i<swk; i++)
227    {
228        var cell = row.insertCell(i);
229        cell.align = "center";
230        cell.innerHTML = "&nbsp;";
231    }
232    for(var i=swk; i<7; i++)
233    {
234        var cell = row.insertCell(i);
235        cell.align = "center";
236        EnableDay(sender,cell,dayID++,i);
237    }
238    //中間行
239    var lastDay = GetMaxDay(sender);
240    var rows = parseInt((lastDay-dayID+1) / 7);
241    for(var r=0; r<rows; r++)
242    {
243        row = table.insertRow(table.rows.length);
244        for(var i=0; i<7; i++)
245        {
246            var cell = row.insertCell(i);
247            cell.align = "center";
248            EnableDay(sender,cell,dayID++,i);
249        }
250    }
251    //最後行
252    if(dayID<=lastDay)
253    {
254        row = table.insertRow(table.rows.length);
255        var item = 0;
256        while(dayID<=lastDay)
257        {
258            item++;
259            var cell = row.insertCell(item-1);
260            cell.align = "center";
261            EnableDay(sender,cell,dayID++,item-1);
262        }
263        for(var i=0; i<7- item; i++)
264        {
265            var cell = row.insertCell(item+i);
266            cell.align = "center";
267            cell.innerHTML = "&nbsp;";
268        }
269    }
270
271}
272
273//有效日期
274function EnableDay(sender,cell,dayID,item)
275{
276    var fontColor = sender.CF_Body_Enabled;
277    if(item==0 || item==6) fontColor = "#FF0000";
278    var curDate = new Date(sender.Year + "/" + sender.Month + "/" + dayID);
279    //var nowDate = new Date();
280    //nowDate = new Date(nowDate.getFullYear() + "/" + (nowDate.getMonth()+1) + "/" + nowDate.getDate());
281    var nowDate = new Date(sender.Year + "/" + sender.Month + "/" + sender.Day);
282    if(sender.Year + "/" + sender.Month + "/" + dayID == nowDate.getFullYear() + "/" + (nowDate.getMonth()+1) + "/" + nowDate.getDate())
283    {
284            sender.currentTD = cell;
285            cell.style.backgroundColor = sender.CBG_Selected;  //當前選中的字體背景色
286            cell.style.color = sender.CF_Body_Enabled;//有效的字體色
287            cell.style.fontSize = sender.FZ_Body;
288            cell.PUCtrl = sender;
289            cell.onclick = TD_OnClick;
290            cell.style.color = fontColor;
291            cell.innerHTML =  dayID;
292    }
293    else if(curDate<nowDate)
294    {
295        if(sender.EnableDay<=0)
296        {
297                cell.onmouseover = TD_OnMouseOver;
298                cell.onmouseout = TD_OnMouseOut;
299                cell.PUCtrl = sender;
300                cell.onclick = TD_OnClick;
301                cell.style.backgroundColor = sender.CBG_Body_Enabled;　//有效的背景色
302                cell.style.color = sender.CF_Body_Enabled;//有效的字體色
303                cell.style.fontSize = sender.FZ_Body;
304                cell.style.color = fontColor;
305                cell.innerHTML = dayID;
306        }
307        else
308        {
309            cell.style.backgroundColor = sender.CBG_Body;　//無效的背景色
310            cell.style.color = sender.CF_Body;//無效的字體色
311            cell.style.fontSize = sender.FZ_Body;
312            cell.innerHTML =   dayID;
313        }
314    }
315    else
316    {
317        nowDate.setDate(nowDate.getDate() + sender.EnableDay);
318        if(curDate>=nowDate)
319        {
320            if(sender.EnableDay<=0)
321            {
322                cell.onmouseover = TD_OnMouseOver;
323                cell.onmouseout = TD_OnMouseOut;
324                cell.PUCtrl = sender;
325                cell.onclick = TD_OnClick;
326                cell.style.backgroundColor = sender.CBG_Body_Enabled;　//有效的背景色
327                cell.style.color = sender.CF_Body_Enabled;//有效的字體色
328                cell.style.fontSize = sender.FZ_Body;
329                cell.style.color = fontColor;
330                cell.innerHTML =  dayID;
331            }
332            else
333            {
334                cell.style.backgroundColor = sender.CBG_Body;　//無效的背景色
335                cell.style.color = sender.CF_Body;//無效的字體色
336                cell.style.fontSize = sender.FZ_Body;
337                cell.innerHTML =   dayID;
338            }
339        }
340        else
341        {
342            cell.onmouseover = TD_OnMouseOver;
343            cell.onmouseout = TD_OnMouseOut;
344            cell.PUCtrl = sender;
345            cell.onclick = TD_OnClick;
346            cell.style.backgroundColor = sender.CBG_Body_Enabled;　//有效的背景色
347            cell.style.color = sender.CF_Body_Enabled;//有效的字體色
348            cell.style.fontSize = sender.FZ_Body;
349            cell.style.color = fontColor;
350            cell.innerHTML = dayID;
351
352        }
353        
354    }
355}
356
357function DeleteTable(sender)
358{
359    sender.Parent.removeChild(document.getElementById(sender.ID + "_Table"));
360}
361
362///獲得當前日期
363function GetDate()
364{
365    if(this.TWDate)
366    {
367        return (this.Year-1911) + "-" + this.Month + "-" + this.currentTD.innerHTML;
368    }
369    else
370    {
371        return this.Year + "-" + this.Month + "-" + this.currentTD.innerHTML;
372    }
373}
374
375function NextYear()
376{
377    sender = eval(this.PUCtrl);
378    var cDate =  new Date(sender.Year + "/" + sender.Month + "/" + sender.Day);
379    var strDate = addDate(6,1,cDate);
380    var curDate = new Date(strDate);
381    Init(sender,curDate);
382    DeleteTable(sender);
383    CreateTable(sender);
384}
385
386function NextMonth()
387{
388    sender = eval(this.PUCtrl);
389    var cDate =  new Date(sender.Year + "/" + sender.Month + "/" + sender.Day);
390    var strDate = addDate(5,1,cDate);
391    var curDate = new Date(strDate);
392    Init(sender,curDate);
393    DeleteTable(sender);
394    CreateTable(sender);
395}
396
397function PreYear()
398{
399    sender = eval(this.PUCtrl);
400    var cDate =  new Date(sender.Year + "/" + sender.Month + "/" + sender.Day);
401    var strDate = addDate(6,-1,cDate);
402    var curDate = new Date(strDate);
403    Init(sender,curDate);
404    DeleteTable(sender);
405    CreateTable(sender);
406}
407
408function PreMonth()
409{
410    sender = eval(this.PUCtrl);
411    var cDate =  new Date(sender.Year + "/" + sender.Month + "/" + sender.Day);
412    var strDate = addDate(5,-1,cDate);
413    var curDate = new Date(strDate);
414    Init(sender,curDate);
415    DeleteTable(sender);
416    CreateTable(sender);
417}
418
419function GoYear()
420{
421    var args = GoYear.arguments;
422    var uctrlYear = args[0];
423    var year = uctrlYear.value;
424    //alert(year);
425    //var td = uctrlYear.parentElement;
426    var td = uctrlYear.parentNode;
427    var sender = td.PUCtrl
428    
429    if(sender.TWDate) year= parseInt(year)+1911;
430    var cDate =  new Date( year + "/" + sender.Month + "/" + sender.Day);
431    Init(sender,cDate);
432    DeleteTable(sender);
433    CreateTable(sender);
434}
435
436function GoMonth()
437{
438    var args = GoMonth.arguments;
439    var uctrlMonth = args[0];
440    //var td = uctrlMonth.parentElement;
441    var td = uctrlMonth.parentNode;
442    var sender = td.PUCtrl
443    if(parseInt(uctrlMonth.value)<1) uctrlMonth.value= 1;
444    if(parseInt(uctrlMonth.value)>12)uctrlMonth.value= 12;
445    var cDate =  new Date(sender.Year + "/" + uctrlMonth.value + "/" + sender.Day);
446    Init(sender,cDate);
447    DeleteTable(sender);
448    CreateTable(sender);
449}
450
451function TD_OnMouseOver()
452{
453    sender = eval(this.PUCtrl);
454    this.style.backgroundColor = sender.CBG_OnMouseOver;
455    this.style.cursor = "hand";
456}
457function TD_OnMouseOut()
458{
459    sender = eval(this.PUCtrl);
460    if(sender.currentTD!=this)
461        this.style.backgroundColor = sender.CBG_Body_Enabled;
462}
463function TD_OnClick()
464{
465    sender = eval(this.PUCtrl);
466    if(sender.currentTD!=this)
467    {
468        sender.currentTD.style.backgroundColor = sender.CBG_Body_Enabled;
469        sender.currentTD.style.color = sender.CF_Body_Enabled;
470        sender.currentTD = this;
471        sender.currentTD.style.backgroundColor = sender.CBG_Selected;
472        sender.currentTD.style.color = sender.CF_Selected;
473    }
474    if(sender.OnClick!=null) 
475       sender.OnClick(sender,sender.Value());
476    //if(sender.BinderControl!=null)
477    //    sender.BinderControl.value = sender.Value();
478}
479
480
481//獲得當前月的最大天數
482function GetMaxDay(sender)
483{
484    var iYear=sender.Year;
485    var iMonth=sender.Month;
486    switch(iMonth)
487    {
488        case 1:
489        case 3:
490        case 5:
491        case 7:
492        case 8:
493        case 10:
494        case 12:
495                return 31;
496        case 4:
497        case 6:
498        case 9:
499        case 11:
500            return 30;
501        case 2:
502            var d = new Date(iYear+"/2/29");
503            if(d.getMonth()==1)    return 29;
504            else return 28
505        }
506}
507
508//返回星期
509function WeekName(sender,id)
510{
511    var weekName = "";
512    if(sender.TWDate)
513    {
514        switch(id)
515        {
516            case 0:
517                weekName = "日";
518                break;
519            case 1:
520                weekName = "一";
521                break;
522            case 2:
523                weekName = "二";
524                break;
525            case 3:
526                weekName = "三";
527                break;
528            case 4:
529                weekName = "四";
530                break;
531            case 5:
532                weekName = "五";
533                break;
534            case 6:
535                weekName = "六";
536                break;
537        }
538    }
539    else
540    {
541    switch(id)
542        {
543            case 0:
544                weekName = "Su";
545                break;
546            case 1:
547                weekName = "Mo";
548                break;
549            case 2:
550                weekName = "Tu";
551                break;
552            case 3:
553                weekName = "We";
554                break;
555            case 4:
556                weekName = "Th";
557                break;
558            case 5:
559                weekName = "Fr";
560                break;
561            case 6:
562                weekName = "Sat";
563                break;
564        }
565    }
566    return weekName;
567}
568
569//獲得月份
570function getMonthText(iMonth)
571{
572
573    switch(iMonth)
574    {
575        case 1:
576            return "1";
577        case 2:
578            return "2";
579        case 3:
580            return "3";
581        case 4:
582            return "4";
583        case 5:
584            return "5";
585        case 6:
586            return "6";
587        case 7:
588            return "7";
589        case 8:
590            return "8";
591        case 9:
592            return "9";
593        case 10:
594            return "10";
595        case 11:
596            return "11";
597        case 12:
598            return "12";
599        default:
600            return "";
601    }
602}
603
604//日期+
605function addDate(type,NumDay,dtDate)
606{
607   var date = new Date(dtDate)
608    type = parseInt(type) 
609    lIntval = parseInt(NumDay)
610    switch(type)
611    {
612        case 6 ://年
613            date.setYear(date.getFullYear() + lIntval)
614            break;
615        case 7 : //季
616            date.setMonth(date.getMonth() + (lIntval * 3) )
617            break;
618        case 5 ://月
619            date.setMonth(date.getMonth() + lIntval)
620            break;
621        case 4 ://天
622            date.setDate(date.getDate() + lIntval)
623            break
624        case 3 ://時
625            date.setHours(date.getHours() + lIntval)
626            break
627        case 2 ://分
628            date.setMinutes(date.getMinutes() + lIntval)
629            break
630        case 1 ://秒
631            date.setSeconds(date.getSeconds() + lIntval)
632            break;
633        default:
634     } 
635    return date.getFullYear() +'/' +  (date.getMonth()+1) + '/' +date.getDate()+ ' '+ date.getHours()+':'+date.getMinutes()+':'+date.getSeconds();
636 }
637 
638 //創建圖片
639 function CreateIMG(parentObj,src)
640 {
641    var uctrlImg = document.createElement("IMG");
642    uctrlImg.src = src;
643    uctrlImg.border = 0;
644    parentObj.appendChild(uctrlImg);
645 }

2. 調用：

 1<html>
 2    <head>
 3        <title></title>
 4        <script language="javascript" src="UCtrl_Date.js"></script>
 5        <base target="_self" />
 6        <script language=javascript>
 7        <!--
 8            window.onload = Page_Load;
 9            function Page_Load()
10            {
11                var selDate = new UCtrlDate();        //創建日期對象
12                selDate.Width = 300;    //寬
13                selDate.CBG_Title = "#ebeb99";    
14                selDate.CBG_Head = "#EBEBEB";
15                selDate.ID = "DateTim1"; //控件ID
16                selDate.Year = 2003; //控件年,不指定為當前年
17                selDate.Month = 4;//控件月，不指定為當前月
18                selDate1Day = 26;//控件日,不指定為當前日
19                selDate.IsImg = false; //是否顯示圖片(上下年月)
20                //selDate.EnableDay = 45;//控件從指定日期開始，向後多少天可以被選,默認為所有
21                //selDate.Parent = document.all("RQ"); //控件放在哪個容器裡，無指定為body中
22                //selDate.TWDate = false; //false為西元日期,默認為台灣日期
23                selDate.OnClick = AA; //控件上單擊日期時所執行的方法,參數為所選中的日期
24                selDate.OnLoad(); //加載控件
25            }
26            //控件上單擊日期時所執行的方法,參數為所選中的日期
27            function AA(date)
28            {
29                window.returnValue = date;
30                self.close();
31                
32            }
33        //-->
34        </script>
35    </head>
36    <body leftmargin="0" rightmargin="0" topmargin="0" bottommargin="0">
37    </body>
38</html>

3.顯示如圖

 4. 如加上下面的文件

 1
 2var curDateObject = null;    //當前日期對象(div)
 3var curDate = new Date();
 4var divName = "DivDate" + curDate.getFullYear() + curDate.getMonth() + curDate.getDate();
 5    
 6function OpenDate(txtCtrl)
 7{
 8    var curDivName = txtCtrl.id + "_" + divName
 9    if(curDateObject==null || curDateObject.id!=curDivName)
10    {
11        var div_Date = "<div style=\"Z-INDEX: 100; LEFT: 0px; POSITION: absolute; TOP: 0px; WIDTH: 300px;\" id='" + curDivName +"' ></div>";
12        document.body.insertAdjacentHTML("afterBegin",div_Date);
13        LoadDate811019(curDivName,txtCtrl);
14        document.all(curDivName).style.left =txtCtrl.offsetLeft;
15        document.all(curDivName).style.top =txtCtrl.offsetTop+txtCtrl.offsetHeight;
16        
17        curDateObject = document.all(curDivName);
18    }
19}
20
21function LoadDate811019(curDivName,txtCtrl)
22{
23    var txtDate = new UCtrlDate();
24    txtDate.Width = 260;
25    txtDate.TWDate = false;
26    txtDate.Parent = document.all(curDivName);
27    txtDate.ID = "DateTimeTXT";
28    txtDate.OnClick = DelegateMethod;
29    txtDate.curDivName = curDivName;
30    txtDate.TXTCtrl = txtCtrl;
31    if(txtCtrl.value!="")
32    {
33        var ymd = txtCtrl.value;
34        var dt = ymd.split(" ");
35        ymd = dt[0];
36        ymd = ymd.replace("/","-");
37        ymds = ymd.split("-");
38        var y = parseInt(ymds[0]);
39        var m = parseInt(ymds[1]);
40        var d = parseInt(ymds[2]);
41        if(txtDate.TWDate) y = y+1911;
42        txtDate.Year = y;
43        txtDate.Month = m;
44        txtDate.Day = d;
45    }
46    txtDate.OnLoad();
47}
48
49function DelegateMethod(sender,date)
50{
51    sender.TXTCtrl.value = date;
52    document.body.removeChild(document.getElementById(sender.curDivName));
53    curDateObject = null;
54}
55
56document.onmousedown = CheckSelectObject;
57function CheckSelectObject()
58{
59    var doObject = curDateObject;
60    if(doObject!=null)
61    {
62        var isClick = false;
63        var curObject = event.srcElement;
64        if(curObject != null)
65        {
66            var parentObject = curObject.parentElement;
67            while(parentObject!=null)
68            {
69                if(parentObject == doObject)
70                {
71                    isClick = true;
72                    break;
73                }
74                parentObject = parentObject.parentElement;
75            }
76        }
77        if(!isClick)
78        {
79            document.body.removeChild(doObject);
80            curDateObject = null;
81        }
82    }
83}
84

5.現在就可以直接調用了，且效果認為比上面的還要好些
<input type="text" id="ShowDate1" name="ShowDate1" onfocus="OpenDate(this)" value="2006-06-07" readonly />

即當鼠標放在文本框中時顯示日期控件，單擊所選日期後，文本框獲得日期，關閉日期控件