mods/ecomm/datetimepicker.js

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