1
|
//Javascript name: My Date Time Picker
|
2
|
//Date created: 16-Nov-2003 23:19
|
3
|
//Scripter: TengYong Ng
|
4
|
//Website: http://www.rainforestnet.com
|
5
|
//Copyright (c) 2003 TengYong Ng
|
6
|
//FileName: DateTimePicker.js
|
7
|
//Version: 0.8
|
8
|
//Contact: contact@rainforestnet.com
|
9
|
// Note: Permission given to use this script in ANY kind of applications if
|
10
|
// header lines are left unchanged.
|
11
|
|
12
|
//Global variables
|
13
|
var winCal;
|
14
|
var dtToday=new Date();
|
15
|
var Cal;
|
16
|
var docCal;
|
17
|
var MonthName=["January", "February", "March", "April", "May", "June","July",
|
18
|
"August", "September", "October", "November", "December"];
|
19
|
var WeekDayName=["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"];
|
20
|
var exDateTime;//Existing Date and Time
|
21
|
|
22
|
//Configurable parameters
|
23
|
var cnTop="200";//top coordinate of calendar window.
|
24
|
var cnLeft="500";//left coordinate of calendar window
|
25
|
var WindowTitle ="DateTime Picker";//Date Time Picker title.
|
26
|
var WeekChar=2;//number of character for week day. if 2 then Mo,Tu,We. if 3 then Mon,Tue,Wed.
|
27
|
var CellWidth=20;//Width of day cell.
|
28
|
var DateSeparator="/";//Date Separator, you can change it to "/" if you want.
|
29
|
var TimeMode=24;//default TimeMode value. 12 or 24
|
30
|
|
31
|
var ShowLongMonth=true;//Show long month name in Calendar header. example: "January".
|
32
|
var ShowMonthYear=true;//Show Month and Year in Calendar header.
|
33
|
var MonthYearColor="#435370";//Font Color of Month and Year in Calendar header.
|
34
|
var WeekHeadColor="#777777";//Background Color in Week header.
|
35
|
var SundayColor="#D9DEE8";//Background color of Sunday.
|
36
|
var SaturdayColor="#D9DEE8";//Background color of Saturday.
|
37
|
var WeekDayColor="white";//Background color of weekdays.
|
38
|
var FontColor="black";//color of font in Calendar day cell.
|
39
|
var TodayColor="#FFFF33";//Background color of today.
|
40
|
var SelDateColor="red";//Backgrond color of selected date in textbox.
|
41
|
var YrSelColor="black";//color of font of Year selector.
|
42
|
var ThemeBg="";//Background image of Calendar window.
|
43
|
//end Configurable parameters
|
44
|
//end Global variable
|
45
|
|
46
|
function NewCal(pCtrl,pFormat,pShowTime,pTimeMode)
|
47
|
{
|
48
|
Cal=new Calendar(dtToday);
|
49
|
if ((pShowTime!=null) && (pShowTime))
|
50
|
{
|
51
|
Cal.ShowTime=true;
|
52
|
if ((pTimeMode!=null) &&((pTimeMode=='12')||(pTimeMode=='24')))
|
53
|
{
|
54
|
TimeMode=pTimeMode;
|
55
|
}
|
56
|
}
|
57
|
if (pCtrl!=null)
|
58
|
Cal.Ctrl=pCtrl;
|
59
|
if (pFormat!=null)
|
60
|
Cal.Format=pFormat.toUpperCase();
|
61
|
|
62
|
exDateTime=document.getElementById(pCtrl).value;
|
63
|
if (exDateTime!="")//Parse Date String
|
64
|
{
|
65
|
var Sp1;//Index of Date Separator 1
|
66
|
var Sp2;//Index of Date Separator 2
|
67
|
var tSp1;//Index of Time Separator 1
|
68
|
var tSp2;//Index of Time Separator 2
|
69
|
var strMonth;
|
70
|
var strDate;
|
71
|
var strYear;
|
72
|
var intMonth;
|
73
|
var YearPattern;
|
74
|
var strHour;
|
75
|
var strMinute;
|
76
|
var strSecond;
|
77
|
//parse month
|
78
|
Sp1=exDateTime.indexOf(DateSeparator,0);
|
79
|
Sp2=exDateTime.indexOf(DateSeparator,(parseInt(Sp1)+1));
|
80
|
|
81
|
if ((Cal.Format.toUpperCase()=="DDMMYYYY") || (Cal.Format.toUpperCase()=="DDMMMYYYY"))
|
82
|
{
|
83
|
strMonth=exDateTime.substring(Sp1+1,Sp2);
|
84
|
strDate=exDateTime.substring(0,Sp1);
|
85
|
}
|
86
|
else if ((Cal.Format.toUpperCase()=="MMDDYYYY") || (Cal.Format.toUpperCase()=="MMMDDYYYY"))
|
87
|
{
|
88
|
strMonth=exDateTime.substring(0,Sp1);
|
89
|
strDate=exDateTime.substring(Sp1+1,Sp2);
|
90
|
}
|
91
|
if (isNaN(strMonth))
|
92
|
intMonth=Cal.GetMonthIndex(strMonth);
|
93
|
else
|
94
|
intMonth=parseInt(strMonth,10)-1;
|
95
|
if ((parseInt(intMonth,10)>=0) && (parseInt(intMonth,10)<12))
|
96
|
Cal.Month=intMonth;
|
97
|
//end parse month
|
98
|
//parse Date
|
99
|
if ((parseInt(strDate,10)<=Cal.GetMonDays()) && (parseInt(strDate,10)>=1))
|
100
|
Cal.Date=strDate;
|
101
|
//end parse Date
|
102
|
//parse year
|
103
|
strYear=exDateTime.substring(Sp2+1,Sp2+5);
|
104
|
YearPattern=/^\d{4}$/;
|
105
|
if (YearPattern.test(strYear))
|
106
|
Cal.Year=parseInt(strYear,10);
|
107
|
//end parse year
|
108
|
//parse time
|
109
|
if (Cal.ShowTime==true)
|
110
|
{
|
111
|
tSp1=exDateTime.indexOf(":",0);
|
112
|
tSp2=exDateTime.indexOf(":",(parseInt(tSp1)+1));
|
113
|
strHour=exDateTime.substring(tSp1,(tSp1)-2);
|
114
|
Cal.SetHour(strHour);
|
115
|
strMinute=exDateTime.substring(tSp1+1,tSp2);
|
116
|
Cal.SetMinute(strMinute);
|
117
|
strSecond=exDateTime.substring(tSp2+1,tSp2+3);
|
118
|
Cal.SetSecond(strSecond);
|
119
|
}
|
120
|
}
|
121
|
winCal=window.open("","DateTimePicker","toolbar=0,status=0,menubar=0,fullscreen=no,width=195,height=200,resizable=0,top="+cnTop+",left="+cnLeft);
|
122
|
docCal=winCal.document;
|
123
|
RenderCal();
|
124
|
}
|
125
|
|
126
|
function RenderCal()
|
127
|
{
|
128
|
var vCalHeader;
|
129
|
var vCalData;
|
130
|
var vCalTime;
|
131
|
var i;
|
132
|
var j;
|
133
|
var SelectStr;
|
134
|
var vDayCount=0;
|
135
|
var vFirstDay;
|
136
|
|
137
|
docCal.open();
|
138
|
docCal.writeln("<html><head><title>"+WindowTitle+"</title>");
|
139
|
docCal.writeln("<script>var winMain=window.opener;</script>");
|
140
|
docCal.writeln("<style>");
|
141
|
docCal.writeln("body,td,th,input,select {font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;font-size: 11px;}");
|
142
|
docCal.writeln("a {text-decoration: none;}");
|
143
|
docCal.writeln("</style>");
|
144
|
docCal.writeln("</head><body background='"+ThemeBg+"' link="+FontColor+" vlink="+FontColor+"><form name='Calendar'>");
|
145
|
|
146
|
vCalHeader="<table border=1 cellpadding=1 cellspacing=1 align=\"center\" valign=\"top\" bgcolor='#EEEEEE' style=\"border-color:#999999; border-style:solid; border-collapse:collapse\">\n";
|
147
|
//Month Selector
|
148
|
vCalHeader+="<tr>\n<td colspan='7'><table border=0 width='100%' cellpadding=0 cellspacing=0><tr><td align='left'>\n";
|
149
|
vCalHeader+="<select name=\"MonthSelector\" onChange=\"javascript:winMain.Cal.SwitchMth(this.selectedIndex);winMain.RenderCal();\">\n";
|
150
|
for (i=0;i<12;i++)
|
151
|
{
|
152
|
if (i==Cal.Month)
|
153
|
SelectStr="Selected";
|
154
|
else
|
155
|
SelectStr="";
|
156
|
vCalHeader+="<option "+SelectStr+" value >"+MonthName[i]+"\n";
|
157
|
}
|
158
|
vCalHeader+="</select></td>";
|
159
|
//Year selector
|
160
|
vCalHeader+="\n<td align='right'><a href=\"javascript:winMain.Cal.DecYear();winMain.RenderCal()\"><b><font color=\""+YrSelColor+"\"><</font></b></a><font face=\"Verdana\" color=\""+YrSelColor+"\" size=2><b> "+Cal.Year+" </b></font><a href=\"javascript:winMain.Cal.IncYear();winMain.RenderCal()\"><b><font color=\""+YrSelColor+"\">></font></b></a></td></tr></table></td>\n";
|
161
|
vCalHeader+="</tr>";
|
162
|
//Calendar header shows Month and Year
|
163
|
if (ShowMonthYear)
|
164
|
vCalHeader+="<tr><td colspan='7'><font face='Verdana' size='2' align='center' color='"+MonthYearColor+"'><b>"+Cal.GetMonthName(ShowLongMonth)+" "+Cal.Year+"</b></font></td></tr>\n";
|
165
|
//Week day header
|
166
|
vCalHeader+="<tr bgcolor="+WeekHeadColor+">";
|
167
|
for (i=0;i<7;i++)
|
168
|
{
|
169
|
vCalHeader+="<td align='center'><font face='Verdana' size='2'>"+WeekDayName[i].substr(0,WeekChar)+"</font></td>";
|
170
|
}
|
171
|
vCalHeader+="</tr>";
|
172
|
docCal.write(vCalHeader);
|
173
|
|
174
|
//Calendar detail
|
175
|
CalDate=new Date(Cal.Year,Cal.Month);
|
176
|
CalDate.setDate(1);
|
177
|
vFirstDay=CalDate.getDay();
|
178
|
vCalData="<tr>";
|
179
|
for (i=0;i<vFirstDay;i++)
|
180
|
{
|
181
|
vCalData=vCalData+GenCell();
|
182
|
vDayCount=vDayCount+1;
|
183
|
}
|
184
|
for (j=1;j<=Cal.GetMonDays();j++)
|
185
|
{
|
186
|
var strCell;
|
187
|
vDayCount=vDayCount+1;
|
188
|
if ((j==dtToday.getDate())&&(Cal.Month==dtToday.getMonth())&&(Cal.Year==dtToday.getFullYear()))
|
189
|
strCell=GenCell(j,true,TodayColor);//Highlight today's date
|
190
|
else
|
191
|
{
|
192
|
if (j==Cal.Date)
|
193
|
{
|
194
|
strCell=GenCell(j,true,SelDateColor);
|
195
|
}
|
196
|
else
|
197
|
{
|
198
|
if (vDayCount%7==0)
|
199
|
strCell=GenCell(j,false,SaturdayColor);
|
200
|
else if ((vDayCount+6)%7==0)
|
201
|
strCell=GenCell(j,false,SundayColor);
|
202
|
else
|
203
|
strCell=GenCell(j,null,WeekDayColor);
|
204
|
}
|
205
|
}
|
206
|
vCalData=vCalData+strCell;
|
207
|
|
208
|
if((vDayCount%7==0)&&(j<Cal.GetMonDays()))
|
209
|
{
|
210
|
vCalData=vCalData+"</tr>\n<tr>";
|
211
|
}
|
212
|
}
|
213
|
docCal.writeln(vCalData);
|
214
|
//Time picker
|
215
|
if (Cal.ShowTime)
|
216
|
{
|
217
|
var showHour;
|
218
|
showHour=Cal.getShowHour();
|
219
|
vCalTime="<tr>\n<td colspan='7' align='center'>";
|
220
|
vCalTime+="<input type='text' name='hour' maxlength=2 size=1 style=\"WIDTH: 22px\" value="+showHour+" onchange=\"javascript:winMain.Cal.SetHour(this.value)\">";
|
221
|
vCalTime+=" : ";
|
222
|
vCalTime+="<input type='text' name='minute' maxlength=2 size=1 style=\"WIDTH: 22px\" value="+Cal.Minutes+" onchange=\"javascript:winMain.Cal.SetMinute(this.value)\">";
|
223
|
vCalTime+=" : ";
|
224
|
vCalTime+="<input type='text' name='second' maxlength=2 size=1 style=\"WIDTH: 22px\" value="+Cal.Seconds+" onchange=\"javascript:winMain.Cal.SetSecond(this.value)\">";
|
225
|
if (TimeMode==12)
|
226
|
{
|
227
|
var SelectAm =(parseInt(Cal.Hours,10)<12)? "Selected":"";
|
228
|
var SelectPm =(parseInt(Cal.Hours,10)>=12)? "Selected":"";
|
229
|
|
230
|
vCalTime+="<select name=\"ampm\" onchange=\"javascript:winMain.Cal.SetAmPm(this.options[this.selectedIndex].value);\">";
|
231
|
vCalTime+="<option "+SelectAm+" value=\"AM\">AM</option>";
|
232
|
vCalTime+="<option "+SelectPm+" value=\"PM\">PM<option>";
|
233
|
vCalTime+="</select>";
|
234
|
}
|
235
|
vCalTime+="\n</td>\n</tr>";
|
236
|
docCal.write(vCalTime);
|
237
|
}
|
238
|
//end time picker
|
239
|
docCal.writeln("\n</table>");
|
240
|
docCal.writeln("</form></body></html>");
|
241
|
docCal.close();
|
242
|
}
|
243
|
|
244
|
function GenCell(pValue,pHighLight,pColor)//Generate table cell with value
|
245
|
{
|
246
|
var PValue;
|
247
|
var PCellStr;
|
248
|
var vColor;
|
249
|
var vHLstr1;//HighLight string
|
250
|
var vHlstr2;
|
251
|
var vTimeStr;
|
252
|
|
253
|
if (pValue==null)
|
254
|
PValue="";
|
255
|
else
|
256
|
PValue=pValue;
|
257
|
|
258
|
if (pColor!=null)
|
259
|
vColor="bgcolor=\""+pColor+"\"";
|
260
|
else
|
261
|
vColor="";
|
262
|
if ((pHighLight!=null)&&(pHighLight))
|
263
|
{vHLstr1="color='red'><b>";vHLstr2="</b>";}
|
264
|
else
|
265
|
{vHLstr1=">";vHLstr2="";}
|
266
|
|
267
|
if (Cal.ShowTime)
|
268
|
{
|
269
|
vTimeStr="winMain.document.getElementById('"+Cal.Ctrl+"').value+=' '+"+"winMain.Cal.getShowHour()"+"+':'+"+"winMain.Cal.Minutes"+"+':'+"+"winMain.Cal.Seconds";
|
270
|
if (TimeMode==12)
|
271
|
vTimeStr+="+' '+winMain.Cal.AMorPM";
|
272
|
}
|
273
|
else
|
274
|
vTimeStr="";
|
275
|
PCellStr="<td "+vColor+" width="+CellWidth+" align='center'><font face='verdana' size='2'"+vHLstr1+"<a href=\"javascript:winMain.document.getElementById('"+Cal.Ctrl+"').value='"+Cal.FormatDate(PValue)+"';"+vTimeStr+";window.close();\">"+PValue+"</a>"+vHLstr2+"</font></td>";
|
276
|
return PCellStr;
|
277
|
}
|
278
|
|
279
|
function Calendar(pDate,pCtrl)
|
280
|
{
|
281
|
//Properties
|
282
|
this.Date=pDate.getDate();//selected date
|
283
|
this.Month=pDate.getMonth();//selected month number
|
284
|
this.Year=pDate.getFullYear();//selected year in 4 digits
|
285
|
this.Hours=pDate.getHours();
|
286
|
|
287
|
if (pDate.getMinutes()<10)
|
288
|
this.Minutes="0"+pDate.getMinutes();
|
289
|
else
|
290
|
this.Minutes=pDate.getMinutes();
|
291
|
|
292
|
if (pDate.getSeconds()<10)
|
293
|
this.Seconds="0"+pDate.getSeconds();
|
294
|
else
|
295
|
this.Seconds=pDate.getSeconds();
|
296
|
|
297
|
this.MyWindow=winCal;
|
298
|
this.Ctrl=pCtrl;
|
299
|
this.Format="ddMMyyyy";
|
300
|
this.Separator=DateSeparator;
|
301
|
this.ShowTime=false;
|
302
|
if (pDate.getHours()<12)
|
303
|
this.AMorPM="AM";
|
304
|
else
|
305
|
this.AMorPM="PM";
|
306
|
}
|
307
|
|
308
|
function GetMonthIndex(shortMonthName)
|
309
|
{
|
310
|
for (i=0;i<12;i++)
|
311
|
{
|
312
|
if (MonthName[i].substring(0,3).toUpperCase()==shortMonthName.toUpperCase())
|
313
|
{ return i;}
|
314
|
}
|
315
|
}
|
316
|
Calendar.prototype.GetMonthIndex=GetMonthIndex;
|
317
|
|
318
|
function IncYear()
|
319
|
{ Cal.Year++;}
|
320
|
Calendar.prototype.IncYear=IncYear;
|
321
|
|
322
|
function DecYear()
|
323
|
{ Cal.Year--;}
|
324
|
Calendar.prototype.DecYear=DecYear;
|
325
|
|
326
|
function SwitchMth(intMth)
|
327
|
{ Cal.Month=intMth;}
|
328
|
Calendar.prototype.SwitchMth=SwitchMth;
|
329
|
|
330
|
function SetHour(intHour)
|
331
|
{
|
332
|
var MaxHour;
|
333
|
var MinHour;
|
334
|
switch (TimeMode) {
|
335
|
case 24: { MaxHour=23;MinHour=0; break; }
|
336
|
case 12: { MaxHour=12;MinHour=1; break; }
|
337
|
default: { alert("TimeMode can only be 12 or 24"); break;}
|
338
|
}
|
339
|
var HourExp=new RegExp("^\\d\\d$");
|
340
|
if (HourExp.test(intHour) && (parseInt(intHour,10)<=MaxHour) && (parseInt(intHour,10)>=MinHour))
|
341
|
{
|
342
|
if ((TimeMode==12) && (Cal.AMorPM=="PM"))
|
343
|
{
|
344
|
if (parseInt(intHour,10)==12)
|
345
|
Cal.Hours=12;
|
346
|
else
|
347
|
Cal.Hours=parseInt(intHour,10)+12;
|
348
|
}
|
349
|
else if ((TimeMode==12) && (Cal.AMorPM=="AM"))
|
350
|
{
|
351
|
if (intHour==12)
|
352
|
intHour-=12;
|
353
|
Cal.Hours=parseInt(intHour,10);
|
354
|
}
|
355
|
else if (TimeMode==24)
|
356
|
Cal.Hours=parseInt(intHour,10);
|
357
|
}
|
358
|
}
|
359
|
Calendar.prototype.SetHour=SetHour;
|
360
|
|
361
|
function SetMinute(intMin)
|
362
|
{
|
363
|
var MinExp=new RegExp("^\\d\\d$");
|
364
|
if (MinExp.test(intMin) && (intMin<60))
|
365
|
Cal.Minutes=intMin;
|
366
|
}
|
367
|
Calendar.prototype.SetMinute=SetMinute;
|
368
|
|
369
|
function SetSecond(intSec)
|
370
|
{
|
371
|
var SecExp=new RegExp("^\\d\\d$");
|
372
|
if (SecExp.test(intSec) && (intSec<60))
|
373
|
Cal.Seconds=intSec;
|
374
|
}
|
375
|
Calendar.prototype.SetSecond=SetSecond;
|
376
|
|
377
|
function SetAmPm(pvalue)
|
378
|
{
|
379
|
this.AMorPM=pvalue;
|
380
|
if (pvalue=="PM")
|
381
|
{
|
382
|
this.Hours=(parseInt(this.Hours,10))+12;
|
383
|
if (this.Hours==24)
|
384
|
this.Hours=12;
|
385
|
}
|
386
|
else if (pvalue=="AM")
|
387
|
this.Hours-=12;
|
388
|
}
|
389
|
Calendar.prototype.SetAmPm=SetAmPm;
|
390
|
|
391
|
function getShowHour()
|
392
|
{
|
393
|
var finalHour;
|
394
|
if (TimeMode==12)
|
395
|
{
|
396
|
if (parseInt(this.Hours,10)==0)
|
397
|
{
|
398
|
this.AMorPM="AM";
|
399
|
finalHour=parseInt(this.Hours,10)+12;
|
400
|
}
|
401
|
else if (parseInt(this.Hours,10)==12)
|
402
|
{
|
403
|
this.AMorPM="PM";
|
404
|
finalHour=12;
|
405
|
}
|
406
|
else if (this.Hours>12)
|
407
|
{
|
408
|
this.AMorPM="PM";
|
409
|
if ((this.Hours-12)<10)
|
410
|
finalHour="0"+((parseInt(this.Hours,10))-12);
|
411
|
else
|
412
|
finalHour=parseInt(this.Hours,10)-12;
|
413
|
}
|
414
|
else
|
415
|
{
|
416
|
this.AMorPM="AM";
|
417
|
if (this.Hours<10)
|
418
|
finalHour="0"+parseInt(this.Hours,10);
|
419
|
else
|
420
|
finalHour=this.Hours;
|
421
|
}
|
422
|
}
|
423
|
else if (TimeMode==24)
|
424
|
{
|
425
|
if (this.Hours<10)
|
426
|
finalHour="0"+parseInt(this.Hours,10);
|
427
|
else
|
428
|
finalHour=this.Hours;
|
429
|
}
|
430
|
return finalHour;
|
431
|
}
|
432
|
Calendar.prototype.getShowHour=getShowHour;
|
433
|
|
434
|
function GetMonthName(IsLong)
|
435
|
{
|
436
|
var Month=MonthName[this.Month];
|
437
|
if (IsLong)
|
438
|
return Month;
|
439
|
else
|
440
|
return Month.substr(0,3);
|
441
|
}
|
442
|
Calendar.prototype.GetMonthName=GetMonthName;
|
443
|
|
444
|
function GetMonDays()//Get number of days in a month
|
445
|
{
|
446
|
var DaysInMonth=[31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
|
447
|
if (this.IsLeapYear())
|
448
|
{
|
449
|
DaysInMonth[1]=29;
|
450
|
}
|
451
|
return DaysInMonth[this.Month];
|
452
|
}
|
453
|
Calendar.prototype.GetMonDays=GetMonDays;
|
454
|
|
455
|
function IsLeapYear()
|
456
|
{
|
457
|
if ((this.Year%4)==0)
|
458
|
{
|
459
|
if ((this.Year%100==0) && (this.Year%400)!=0)
|
460
|
{
|
461
|
return false;
|
462
|
}
|
463
|
else
|
464
|
{
|
465
|
return true;
|
466
|
}
|
467
|
}
|
468
|
else
|
469
|
{
|
470
|
return false;
|
471
|
}
|
472
|
}
|
473
|
Calendar.prototype.IsLeapYear=IsLeapYear;
|
474
|
|
475
|
function FormatDate(pDate)
|
476
|
{
|
477
|
if (this.Format.toUpperCase()=="DDMMYYYY")
|
478
|
return (pDate+DateSeparator+(this.Month+1)+DateSeparator+this.Year);
|
479
|
else if (this.Format.toUpperCase()=="DDMMMYYYY")
|
480
|
return (pDate+DateSeparator+this.GetMonthName(false)+DateSeparator+this.Year);
|
481
|
else if (this.Format.toUpperCase()=="MMDDYYYY")
|
482
|
return ((this.Month+1)+DateSeparator+pDate+DateSeparator+this.Year);
|
483
|
else if (this.Format.toUpperCase()=="MMMDDYYYY")
|
484
|
return (this.GetMonthName(false)+DateSeparator+pDate+DateSeparator+this.Year);
|
485
|
}
|
486
|
Calendar.prototype.FormatDate=FormatDate;
|