一个不错的日历控件 - 水冰月

水珮风裳

First seperating,Finally meeting.
有一种厌倦叫热情;有一种等待叫积极;有一种发呆叫思索;有一种逃离叫勇气.

一个不错的日历控件

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]--;
73

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

calendar.currentDate[1]=12;
75

calendar.currentDate[0]--;
76

}
77

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

}
79

/*********** Calendar Today Button ***************/
80

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

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

calendar.goToday.onclick=function(){
83

var d;
84

d =new Date();
85

var e;
86

e=d.getMonth()+1;
87

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

calendar.target.value=d.getYear() + "-"+e+"-"+d.getDate();
90

//calendar.target.value=calendar.sltDate;
91

calendar.hide();
92

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

}
94

/*********** Calendar NextMonth Button ***************/
95

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

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

calendar.nextMonth.onmousedown=function(){
98

calendar.currentDate[1]++;
99

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

calendar.currentDate[1]=1;
101

calendar.currentDate[0]++;
102

}
103

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

}
105

/*********** Calendar NextYear Button ***************/
106

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

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

calendar.nextYear.onmousedown=function(){
109

calendar.currentDate[0]++;
110

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

112

}
113

114

trRow = tbBoard.insertRow(2);
115

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

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

tbCell=trRow.insertCell(i)
118

tbCell.innerText=cnDateName[i];
119

tbCell.align="center";
120

tbCell.width=35;
121

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

}
123

124

/*********** Calendar Body ***************/
125

trRow = tbBoard.insertRow(3);
126

tbCell=trRow.insertCell(0);
127

tbCell.colSpan=7;
128

tbCell.height=97;
129

tbCell.vAlign="top";
130

tbCell.bgColor="#F0F0F0";
131

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

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

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

tbBody.cellPadding=0;
135

tbBody.cellSpacing=1;
136

calendar.body=tbBody;
137

}
138

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

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

var tbCell=trRow.insertCell(cellIndex);
141

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

143

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

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

btnCell.value=TXT;
146

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

btnCell.onmouseover=function(){
148

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

150

}
151

btnCell.onmouseout=function(){
152

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

}
154

// btnCell.onmousedown=function(){
155

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

// }
157

btnCell.onmouseup=function(){
158

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

}
160

btnCell.onclick=function(){
161

btnCell.blur();
162

}
163

return btnCell;
164

}
165

this.setDefaultDate=function(){
166

var dftDate=new Date();
167

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

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

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

}
171

172

/****************** Show Calendar *********************/
173

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

if(targetObject==undefined) {
175

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

return false;
177

}
178

else calendar.target=targetObject;
179

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

else calendar.source=sourceObject;
181

182

var firstDay;
183

var Cells=new Array();
184

185

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

var theDate=new Array();
187

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

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

}
190

else{
191

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

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

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

return;
195

}
196

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

calendar.head.innerText = defaultDate;
198

}
199

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

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

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

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

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

//calendar.setEventKey();
205

206

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

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

//清除旧的日历;
209

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

calendar.body.deleteRow(0)
211

}
212

//建立新的日历;
213

var n=0;day=0;
214

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

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

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

n++;
218

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

day=n-theFirstDay;
220

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

}
222

223

else{
224

var theCell=theRow.insertCell(j);
225

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

}
227

}
228

}
229

230

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

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

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

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

}
235

else{
236

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

}
238

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

var calLeft=offsetPos.x;
240

}
241

else{
242

var calLeft=offsetPos.x+calendar.source.offsetWidth-calendar.calendarPad.style.pixelWidth ;
243

}
244

//alert(offsetPos.x);
245

calendar.calendarPad.style.pixelLeft=calLeft;
246

calendar.calendarPad.style.pixelTop=calTop;
247

}
248

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

this.getAbsolutePos = function(el) {
250

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

if (el.offsetParent) {
252

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

r.x += tmp.x;
254

r.y += tmp.y;
255

}
256

return r;
257

};
258

259

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

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

var theCell=theRow.insertCell(j);
262

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

else var theBgColor="#FFFFFF";
264

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

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

theCell.bgColor=theBgColor;
267

theCell.innerText=day;
268

theCell.align="center";
269

theCell.width=35;
270

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

theCell.onmouseover=function(){
272

theCell.bgColor="#FFFFCC";
273

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

}
275

theCell.onmouseout=function(){
276

theCell.bgColor=theBgColor;
277

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

}
279

theCell.onmousedown=function(){
280

theCell.bgColor="#FFFFCC";
281

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

}
283

theCell.onclick=function(){
284

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

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

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

calendar.target.value=calendar.sltDate;
288

calendar.hide();
289

}
290

}
291

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

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

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

return firstDate.getDay();
295

}
296

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

298

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

theMonth--;
300

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

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

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

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

return len;
305

}
306

/************** 隐藏日历 *********************/
307

this.hide=function(){
308

//calendar.clearEventKey();
309

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

}
311

/************** 从这里开始 *********************/
312

this.setup=function(defaultDate){
313

calendar.addCalendarPad();
314

calendar.addCalendarBoard();
315

calendar.setDefaultDate();
316

}
317

/************** 关于AgetimeCalendar *********************/
318

this.about=function(){
319

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

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

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

var popup = window.createPopup();
323

var popupBody = popup.document.body;
324

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

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

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

popupBody.innerHTML=popHtml;
328

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

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

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

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

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

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

335

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

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

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

339

alert(strAbout);
340

}
341

342

calendar.setup();
343

}
344

345

346

posted on 2006-11-22 09:02 水冰月阅读(332) 评论(2) 收藏举报

刷新页面返回顶部


博客园 © 2004-2025 浙公网安备 33010602011771号浙ICP备2021040463号-3

导航