对象化JavaScript日期控件-优快云博客

本文链接：https://blog.youkuaiyun.com/zwei1121/article/details/654403

本文介绍了一个使用JavaScript实现的自定义日期选择器组件，该组件允许用户通过点击选择特定日期，并提供了上一年、上一月、下一年、下一月的功能。文章详细展示了如何创建日期选择器的步骤，包括初始化日期、创建表格结构、处理日期导航等功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

var siteName = "/Test2";//虛擬目錄名稱;只在顯示圖片(上一年，上一月，下一年，下一月)時有用
4

//用戶控件日期
6

function 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

//定義圖片
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

//代理
45

this.OnClick = null;
46

Init(this,new Date());
48

this.OnLoad = CreateTable;
49

}
50

//初使化變量
52

function Init(sender,curDate)
53

{
54

sender.Year = curDate.getFullYear();
55

sender.Month = curDate.getMonth()+1
56

sender.Day = curDate.getDate();
57

}
59

//創建主體表格
61

function CreateTable()
62

{
63

var args = CreateTable.arguments;
64

var sender = null;
65

if(args.length==1) sender = args[0];
66

else sender = this;
67

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

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

//創建標題
89

function CreateCaption(sender,table)
90

{
91

var row = table.insertRow(table.rows.length);
92

row.bgColor = sender.CBG_Title;
93

row.style.height="22px";
94

//上一年
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

//創建星期
202

function 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

//創建主體
218

function 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 = " ";
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 = " ";
268

}
269

}
270

271

}
272

273

//有效日期
274

function 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

357

function DeleteTable(sender)
358

{
359

sender.Parent.removeChild(document.getElementById(sender.ID + "_Table"));
360

}
361

362

///獲得當前日期
363

function 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

375

function 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

386

function 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

397

function 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

408

function 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

419

function 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

436

function 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

451

function TD_OnMouseOver()
452

{
453

sender = eval(this.PUCtrl);
454

this.style.backgroundColor = sender.CBG_OnMouseOver;
455

this.style.cursor = "hand";
456

}
457

function TD_OnMouseOut()
458

{
459

sender = eval(this.PUCtrl);
460

if(sender.currentTD!=this)
461

this.style.backgroundColor = sender.CBG_Body_Enabled;
462

}
463

function 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

//獲得當前月的最大天數
482

function 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

//返回星期
509

function 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

//獲得月份
570

function 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

//日期+
605

function 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. 調用：

<html>
2

<head>
3

<title></title>
4

<base target="_self" />
6

<!--
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

}
33

//-->
34

</script>
35

</head>
36

<body leftmargin="0" rightmargin="0" topmargin="0" bottommargin="0">
37

</body>
38

</html>

3.顯示如圖

4. 如加上下面的文件

var curDateObject = null; //當前日期對象(div)
3

var curDate = new Date();
4

var divName = "DivDate" + curDate.getFullYear() + curDate.getMonth() + curDate.getDate();
5

function 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

curDateObject = document.all(curDivName);
18

}
19

}
20

function 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

function DelegateMethod(sender,date)
50

{
51

sender.TXTCtrl.value = date;
52

document.body.removeChild(document.getElementById(sender.curDivName));
53

curDateObject = null;
54

}
55

document.onmousedown = CheckSelectObject;
57

function 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 />

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