一个日历控件

公告

Posted on 2006-04-14 22:44 ☆sunny☆美娟阅读(257) 评论(2) 收藏举报

function atCalendarControl(){
2

var calendar=this;
3

this.calendarPad=null;
4

this.prevMonth=null;
5

this.nextMonth=null;
6

this.prevYear=null;
7

this.nextYear=null;
8

this.goToday=null;
9

this.calendarClose=null;
10

this.calendarAbout=null;
11

this.head=null;
12

this.body=null;
13

this.today=[];
14

this.currentDate=[];
15

this.sltDate;
16

this.target;
17

this.source;
18

/************** 加入日历底板及阴影 *********************/
20

this.addCalendarPad=function(){
21

document.write("<div id='divCalendarpad' style='position:absolute;top:100;left:0;width:255;height:167;display:none;'>");
22

document.write("<iframe frameborder=0 height=168 width=255></iframe>");
23

document.write("<div style='position:absolute;top:4;left:4;width:248;height:164;background-color:#336699;'></div>");
24

document.write("</div>");
25

calendar.calendarPad=document.all.divCalendarpad;
26

}
27

/************** 加入日历面板 *********************/
28

this.addCalendarBoard=function(){
29

var BOARD=this;
30

var divBoard=document.createElement("div");
31

calendar.calendarPad.insertAdjacentElement("beforeEnd",divBoard);
32

divBoard.style.cssText="position:absolute;top:0;left:0;width:250;height:166;border:1 outset;background-color:buttonface;";
33

var tbBoard=document.createElement("table");
35

divBoard.insertAdjacentElement("beforeEnd",tbBoard);
36

tbBoard.style.cssText="position:absolute;top:0;left:0;width:100%;height:10;font-size:9pt;";
37

tbBoard.cellPadding=0;
38

tbBoard.cellSpacing=1;
39

tbBoard.bgColor="#333333";
40

/************** 设置各功能按钮的功能 *********************/
42

/*********** Calendar About Button ***************/
43

trRow = tbBoard.insertRow(0);
44

calendar.calendarAbout=calendar.insertTbCell(trRow,0,"-","center");
45

calendar.calendarAbout.onclick=function(){calendar.about();}
46

/*********** Calendar Head ***************/
47

tbCell=trRow.insertCell(1);
48

tbCell.colSpan=5;
49

tbCell.bgColor="#99CCFF";
50

tbCell.align="center";
51

tbCell.style.cssText = "cursor:default";
52

calendar.head=tbCell;
53

/*********** Calendar Close Button ***************/
54

tbCell=trRow.insertCell(2);
55

calendar.calendarClose = calendar.insertTbCell(trRow,2,"x","center");
56

calendar.calendarClose.title="关闭";
57

calendar.calendarClose.onclick=function(){calendar.hide();}
58

/*********** Calendar PrevYear Button ***************/
60

trRow = tbBoard.insertRow(1);
61

calendar.prevYear = calendar.insertTbCell(trRow,0,"<<","center");
62

calendar.prevYear.title="上一年";
63

calendar.prevYear.onmousedown=function(){
64

calendar.currentDate[0]--;
65

calendar.show(calendar.target,calendar.currentDate[0]+"-"+calendar.currentDate[1]+"-"+calendar.currentDate[2],calendar.source);
66

}
67

/*********** Calendar PrevMonth Button ***************/
68

calendar.prevMonth = calendar.insertTbCell(trRow,1,"<","center");
69

calendar.prevMonth.title="上一月";
70

calendar.prevMonth.onmousedown=function(){
71

calendar.currentDate[1]--;
72

if(calendar.currentDate[1]==0){
73

calendar.currentDate[1]=12;
74

calendar.currentDate[0]--;
75

}
76

calendar.show(calendar.target,calendar.currentDate[0]+"-"+calendar.currentDate[1]+"-"+calendar.currentDate[2],calendar.source);
77

}
78

/*********** Calendar Today Button ***************/
79

calendar.goToday = calendar.insertTbCell(trRow,2,"今天","center",3);
80

calendar.goToday.title="选择今天";
81

calendar.goToday.onclick=function(){
82

calendar.sltDate=calendar.currentDate[0]+"-"+calendar.currentDate[1]+"-"+calendar.currentDate[2];
83

calendar.target.value=calendar.sltDate;
84

calendar.hide();
85

//calendar.show(calendar.target,calendar.today[0]+"-"+calendar.today[1]+"-"+calendar.today[2],calendar.source);
86

}
87

/*********** Calendar NextMonth Button ***************/
88

calendar.nextMonth = calendar.insertTbCell(trRow,3,">","center");
89

calendar.nextMonth.title="下一";
90

calendar.nextMonth.onmousedown=function(){
91

calendar.currentDate[1]++;
92

if(calendar.currentDate[1]==13){
93

calendar.currentDate[1]=1;
94

calendar.currentDate[0]++;
95

}
96

calendar.show(calendar.target,calendar.currentDate[0]+"-"+calendar.currentDate[1]+"-"+calendar.currentDate[2],calendar.source);
97

}
98

/*********** Calendar NextYear Button ***************/
99

calendar.nextYear = calendar.insertTbCell(trRow,4,">>","center");
100

calendar.nextYear.title="下一年";
101

calendar.nextYear.onmousedown=function(){
102

calendar.currentDate[0]++;
103

calendar.show(calendar.target,calendar.currentDate[0]+"-"+calendar.currentDate[1]+"-"+calendar.currentDate[2],calendar.source);
104

}
105

106

trRow = tbBoard.insertRow(2);
107

var cnDateName = new Array("周日","周一","周二","周三","周四","周五","周六");
108

for (var i = 0; i < 7; i++) {
109

tbCell=trRow.insertCell(i)
110

tbCell.innerText=cnDateName[i];
111

tbCell.align="center";
112

tbCell.width=35;
113

tbCell.style.cssText="cursor:default;border:1 solid #99CCCC;background-color:#99CCCC;";
114

}
115

116

/*********** Calendar Body ***************/
117

trRow = tbBoard.insertRow(3);
118

tbCell=trRow.insertCell(0);
119

tbCell.colSpan=7;
120

tbCell.height=97;
121

tbCell.vAlign="top";
122

tbCell.bgColor="#F0F0F0";
123

var tbBody=document.createElement("table");
124

tbCell.insertAdjacentElement("beforeEnd",tbBody);
125

tbBody.style.cssText="position:relative;top:0;left:0;width:245;height:103;font-size:9pt;"
126

tbBody.cellPadding=0;
127

tbBody.cellSpacing=1;
128

calendar.body=tbBody;
129

}
130

/************** 加入功能按钮公共样式 *********************/
131

this.insertTbCell=function(trRow,cellIndex,TXT,trAlign,tbColSpan){
132

var tbCell=trRow.insertCell(cellIndex);
133

if(tbColSpan!=undefined) tbCell.colSpan=tbColSpan;
134

135

var btnCell=document.createElement("button");
136

tbCell.insertAdjacentElement("beforeEnd",btnCell);
137

btnCell.value=TXT;
138

btnCell.style.cssText="width:100%;border:1 outset;background-color:buttonface;";
139

btnCell.onmouseover=function(){
140

btnCell.style.cssText="width:100%;border:1 outset;background-color:#F0F0F0;";
141

}
142

btnCell.onmouseout=function(){
143

btnCell.style.cssText="width:100%;border:1 outset;background-color:buttonface;";
144

}
145

// btnCell.onmousedown=function(){
146

// btnCell.style.cssText="width:100%;border:1 inset;background-color:#F0F0F0;";
147

// }
148

btnCell.onmouseup=function(){
149

btnCell.style.cssText="width:100%;border:1 outset;background-color:#F0F0F0;";
150

}
151

btnCell.onclick=function(){
152

btnCell.blur();
153

}
154

return btnCell;
155

}
156

this.setDefaultDate=function(){
157

var dftDate=new Date();
158

calendar.today[0]=dftDate.getYear();
159

calendar.today[1]=dftDate.getMonth()+1;
160

calendar.today[2]=dftDate.getDate();
161

}
162

163

/****************** Show Calendar *********************/
164

this.show=function(targetObject,defaultDate,sourceObject){
165

if(targetObject==undefined) {
166

alert("未设置目标对像. \n方法: ATCALENDAR.show(obj 目标对像,string 默认日期,obj 点击对像);\n\n目标对像:接受日期返回值的对像.\n默认日期:格式为\"yyyy-mm-dd\",缺省为当日日期.\n点击对像:点击这个对像弹出calendar,默认为目标对像.\n");
167

return false;
168

}
169

else calendar.target=targetObject;
170

if(sourceObject==undefined) calendar.source=calendar.target;
171

else calendar.source=sourceObject;
172

173

var firstDay;
174

var Cells=new Array();
175

if(defaultDate==undefined || defaultDate==""){
176

var theDate=new Array();
177

calendar.head.innerText = calendar.today[0]+"-"+calendar.today[1]+"-"+calendar.today[2];
178

theDate[0]=calendar.today[0]; theDate[1]=calendar.today[1]; theDate[2]=calendar.today[2];
179

}
180

else{
181

var reg=/^\d{4}-\d{1,2}-\d{2}$/
182

if(!defaultDate.match(reg)){
183

alert("默认日期的格式不正确\n\n默认日期可接受格式为:'yyyy-mm-dd'");
184

return;
185

}
186

var theDate=defaultDate.split("-");
187

calendar.head.innerText = defaultDate;
188

}
189

calendar.currentDate[0]=theDate[0];
190

calendar.currentDate[1]=theDate[1];
191

calendar.currentDate[2]=theDate[2];
192

theFirstDay=calendar.getFirstDay(theDate[0],theDate[1]);
193

theMonthLen=theFirstDay+calendar.getMonthLen(theDate[0],theDate[1]);
194

//calendar.setEventKey();
195

196

calendar.calendarPad.style.display="";
197

var theRows = Math.ceil((theMonthLen)/7);
198

//清除旧的日历;
199

while (calendar.body.rows.length > 0) {
200

calendar.body.deleteRow(0)
201

}
202

//建立新的日历;
203

var n=0;day=0;
204

for(i=0;i<theRows;i++){
205

theRow=calendar.body.insertRow(i);
206

for(j=0;j<7;j++){
207

n++;
208

if(n>theFirstDay && n<=theMonthLen){
209

day=n-theFirstDay;
210

calendar.insertBodyCell(theRow,j,day);
211

}
212

else{
213

var theCell=theRow.insertCell(j);
214

theCell.style.cssText="background-color:#F0F0F0;cursor:default;";
215

}
216

}
217

}
218

219

//****************调整日历位置**************//
220

var offsetPos=calendar.getAbsolutePos(calendar.source);//计算对像的位置;
221

if((document.body.offsetHeight-(offsetPos.y+calendar.source.offsetHeight-document.body.scrollTop))<calendar.calendarPad.style.pixelHeight){
222

var calTop=offsetPos.y-calendar.calendarPad.style.pixelHeight;
223

}
224

else{
225

var calTop=offsetPos.y+calendar.source.offsetHeight;
226

}
227

if((document.body.offsetWidth-(offsetPos.x+calendar.source.offsetWidth-document.body.scrollLeft))>calendar.calendarPad.style.pixelWidth){
228

var calLeft=offsetPos.x;
229

}
230

else{
231

var calLeft=calendar.source.offsetLeft+calendar.source.offsetWidth;
232

}
233

//alert(offsetPos.x);
234

calendar.calendarPad.style.pixelLeft=calLeft;
235

calendar.calendarPad.style.pixelTop=calTop;
236

}
237

/****************** 计算对像的位置 *************************/
238

this.getAbsolutePos = function(el) {
239

var r = { x: el.offsetLeft, y: el.offsetTop };
240

if (el.offsetParent) {
241

var tmp = calendar.getAbsolutePos(el.offsetParent);
242

r.x += tmp.x;
243

r.y += tmp.y;
244

}
245

return r;
246

};
247

//************* 插入日期单元格 **************/
248

this.insertBodyCell=function(theRow,j,day,targetObject){
249

var theCell=theRow.insertCell(j);
250

if(j==0) var theBgColor="#FF9999";
251

else var theBgColor="#FFFFFF";
252

if(day==calendar.currentDate[2]) var theBgColor="#CCCCCC";
253

if(day==calendar.today[2]) var theBgColor="#99FFCC";
254

theCell.bgColor=theBgColor;
255

theCell.innerText=day;
256

theCell.align="center";
257

theCell.width=35;
258

theCell.style.cssText="border:1 solid #CCCCCC;cursor:hand;";
259

theCell.onmouseover=function(){
260

theCell.bgColor="#FFFFCC";
261

theCell.style.cssText="border:1 outset;cursor:hand;";
262

}
263

theCell.onmouseout=function(){
264

theCell.bgColor=theBgColor;
265

theCell.style.cssText="border:1 solid #CCCCCC;cursor:hand;";
266

}
267

theCell.onmousedown=function(){
268

theCell.bgColor="#FFFFCC";
269

theCell.style.cssText="border:1 inset;cursor:hand;";
270

}
271

theCell.onclick=function(){
272

if(calendar.currentDate[1].length<2) calendar.currentDate[1]="0"+calendar.currentDate[1];
273

if(day.toString().length<2) day="0"+day;
274

calendar.sltDate=calendar.currentDate[0]+"-"+calendar.currentDate[1]+"-"+day;
275

calendar.target.value=calendar.sltDate;
276

calendar.hide();
277

}
278

}
279

/************** 取得月份的第一天为星期几 *********************/
280

this.getFirstDay=function(theYear, theMonth){
281

var firstDate = new Date(theYear,theMonth-1,1);
282

return firstDate.getDay();
283

}
284

/************** 取得月份共有几天 *********************/
285

this.getMonthLen=function(theYear, theMonth) {
286

theMonth--;
287

var oneDay = 1000 * 60 * 60 * 24;
288

var thisMonth = new Date(theYear, theMonth, 1);
289

var nextMonth = new Date(theYear, theMonth + 1, 1);
290

var len = Math.ceil((nextMonth.getTime() - thisMonth.getTime())/oneDay);
291

return len;
292

}
293

/************** 隐藏日历 *********************/
294

this.hide=function(){
295

//calendar.clearEventKey();
296

calendar.calendarPad.style.display="none";
297

}
298

/************** 从这里开始 *********************/
299

this.setup=function(defaultDate){
300

calendar.addCalendarPad();
301

calendar.addCalendarBoard();
302

calendar.setDefaultDate();
303

}
304

/************** 关于AgetimeCalendar *********************/
305

this.about=function(){
306

/*//alert("Agetime Calendar V1.0\n\nwww.agetime.com\n");
307

popLeft = calendar.calendarPad.style.pixelLeft+4;
308

popTop = calendar.calendarPad.style.pixelTop+25;
309

var popup = window.createPopup();
310

var popupBody = popup.document.body;
311

popupBody.style.cssText="border:solid 2 outset;font-size:9pt;background-color:#F0F0F0;";
312

var popHtml = "<span style='color:#336699;font-size:12pt;'><U>关于 AgetimeCalendar</U></span><BR><BR>";
313

popHtml+="版本: v1.0<BR>日期: 2004-03-13";
314

popupBody.innerHTML=popHtml;
315

popup.show(popLeft,popTop,240,136,document.body); */
316

var strAbout = "About AgetimeCalendar\n\n";
317

strAbout+="-\t: 关于\n";
318

strAbout+="x\t: 隐藏\n";
319

strAbout+="<<\t: 上一年\n";
320

strAbout+="<\t: 上一月\n";
321

strAbout+="今日\t: 返回当天日期\n";
322

strAbout+=">\t: 下一月\n";
323

strAbout+="<<\t: 下一年\n";
324

strAbout+="\nAgetimeCalendar\nVersion:v1.0\nDesigned By:暂停打印 2004-03-16 afos_koo@hotmail.com \n";
325

alert(strAbout);
326

}
327

328

calendar.setup();
329

}
330

331

332

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
333

<HTML>
334

<HEAD>
335

<TITLE>AgetimeCalendar DEMO</TITLE>
336

<META NAME="Generator" CONTENT="EditPlus">
337

<META NAME="Author" CONTENT="">
338

<META NAME="Keywords" CONTENT="">
339

<META NAME="Description" CONTENT="">
340

var CalendarWebControl = new atCalendarControl();
343

</script>
344

</HEAD>
345

346

347

348

349

350

calendar.html
351

352

<BODY>
353

<table width="750" border="0" cellpadding="1" cellspacing="3">
354

<tr>
355

<td width="225"> </td>
356

<td width="482"> </td>
357

<td width="21"> </td>
358

</tr>
359

<tr>
360

<td height="123"> </td>
361

<td> </td>
362

<td> </td>
363

</tr>
364

<tr>
365

<td> </td>
366

<td> <form name="form1" method="post" action="">
367

<label>输入日期: </label>
368

<input name="dateInput" type="text" id="dateInput" size="12" maxlength="12" readonly="1" />
369

<img src="img.gif" width="18" height="18" onClick="CalendarWebControl.show(form1.dateInput,'',this);" title="显示日历" />
370

</form>
371

<label></label></td>
372

<td> </td>
373

</tr>
374

</table>
375

<table width="750" border="0">
376

<tr>
377

<td width="245"> </td>
378

<td width="83"> </td>
379

<td width="408"> </td>
380

</tr>
381

<tr>
382

<td height="18"> </td>
383

<td> </td>
384

<td><select name="select">
385

<option selected>我被calendar遮挡了</option>
386

</select></td>
387

</tr>
388

<tr>
389

<td> </td>
390

<td> </td>
391

<td> </td>
392

</tr>
393

</table>
394

日期:
395

<input name="dateInput" type="text" id="dateInput" size="12" maxlength="12" readonly="1" value="2003-12-22" onClick="CalendarWebControl.show(this,this.value);" />
396

</BODY>
397

</HTML>
398

399

刷新页面返回顶部

紫梦飞扬

————————放飞梦想

公告

一个日历控件