[Summary view] [Print] [Text view]

   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  
  18  var exDateTime;//Existing Date and Time
  19  
  20  //Configurable parameters
  21  var cnTop="200";//top coordinate of calendar window.
  22  var cnLeft="500";//left coordinate of calendar window
  23  var WindowTitle ="Date";//Date Time Picker title.
  24  var WeekChar=1;//number of character for week day. if 2 then Mo,Tu,We. if 3 then Mon,Tue,Wed.
  25  var CellWidth=20;//Width of day cell.
  26  var DateSeparator="/";//Date Separator, you can change it to "/" if you want.
  27  var TimeMode=24;//default TimeMode value. 12 or 24
  28  
  29  var ShowLongMonth=true;//Show long month name in Calendar header. example: "January".
  30  var ShowMonthYear=false;//Show Month and Year in Calendar header.
  31  var MonthYearColor="blue";//"#cc0033";//Font Color of Month and Year in Calendar header.
  32  var WeekHeadColor="8e0077";//"#0099CC";//Background Color in Week header.
  33  var SundayColor="#CCCCFF";//"#6699FF";//Background color of Sunday.
  34  var SaturdayColor="#CCCCFF";//Background color of Saturday.
  35  var WeekDayColor="white";//Background color of weekdays.
  36  var FontColor="blue";//color of font in Calendar day cell.
  37  var TodayColor="#FFFF33";//Background color of today.
  38  var SelDateColor="afe0ae";//"#FFFF99";//Backgrond color of selected date in textbox.
  39  var YrSelColor="blue";//"#cc0033";//color of font of Year selector.
  40  var ThemeBg="";//Background image of Calendar window.
  41  //end Configurable parameters
  42  //end Global variable
  43  
  44  function NewCal(pCtrl,pFormat,pShowTime,pTimeMode,pCheck)
  45  {
  46      if (pCheck!=null)
  47          document.getElementById(pCheck).checked = true;
  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 tSp1;//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              
 108          if( Cal.Year == 0 ) Cal.Year = 2005;
 109          //end parse year
 110          //parse time
 111          if (Cal.ShowTime==true)
 112          {
 113              tSp1=exDateTime.indexOf(":",0)
 114              tSp2=exDateTime.indexOf(":",(parseInt(tSp1)+1));
 115              strHour=exDateTime.substring(tSp1,(tSp1)-2);
 116              Cal.SetHour(strHour);
 117              strMinute=exDateTime.substring(tSp1+1,tSp2);
 118              Cal.SetMinute(strMinute);
 119              strSecond=exDateTime.substring(tSp2+1,tSp2+3);
 120              Cal.SetSecond(strSecond);
 121          }    
 122      }
 123      winCal=window.open("","DateTimePicker","toolbar=0,status=0,menubar=0,fullscreen=no,width=195,height=210,resizable=0,top="+cnTop+",left="+cnLeft);
 124      docCal=winCal.document;
 125      RenderCal();
 126  }
 127  
 128  function RenderCal()
 129  {
 130      var vCalHeader;
 131      var vCalData;
 132      var vCalTime;
 133      var i;
 134      var j;
 135      var SelectStr;
 136      var vDayCount=0;
 137      var vFirstDay;
 138  
 139      docCal.open();
 140      docCal.writeln("<html><head><title>"+WindowTitle+"</title>");
 141      docCal.writeln("<script>var winMain=window.opener;</script>");
 142      docCal.writeln("<LINK REL='StyleSheet' TYPE='text/css' HREF='css/ocsreports.css'>");
 143      docCal.writeln("</head><body background='"+ThemeBg+"' link="+FontColor+" vlink="+FontColor+"><form name='Calendar'>");
 144  
 145      vCalHeader="<table border=1 BGCOLOR='#C7D9F5' BORDERCOLOR='#9894B5' cellpadding=1 cellspacing=1 width='100%' align=\"center\" valign=\"top\">\n";
 146      //Month Selector
 147      vCalHeader+="<tr>\n<td colspan='7'><table border=0 width='100%' cellpadding=0 cellspacing=0><tr><td align='left'>\n";
 148      vCalHeader+="<select name=\"MonthSelector\" onChange=\"javascript:winMain.Cal.SwitchMth(this.selectedIndex);winMain.RenderCal();\">\n";
 149      for (i=0;i<12;i++)
 150      {
 151          if (i==Cal.Month)
 152              SelectStr="Selected";
 153          else
 154              SelectStr="";    
 155          vCalHeader+="<option "+SelectStr+" value >"+MonthName[i]+"\n";
 156      }
 157      vCalHeader+="</select></td>";
 158      //Year selector
 159      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";    
 160      vCalHeader+="</tr>";
 161      //Calendar header shows Month and Year
 162      if (ShowMonthYear)
 163          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";
 164      //Week day header
 165      vCalHeader+="<tr bgcolor="+WeekHeadColor+">";
 166      for (i=0;i<7;i++)
 167      {
 168          vCalHeader+="<td align='center'><font face='Verdana' size='2' color='white'><b>"+WeekDayName[i].substr(0,WeekChar)+"</b></font></td>";
 169      }
 170      vCalHeader+="</tr>";    
 171      docCal.write(vCalHeader);
 172      
 173      //Calendar detail
 174      CalDate=new Date(Cal.Year,Cal.Month);
 175      CalDate.setDate(1);
 176      vFirstDay=CalDate.getDay();
 177      vCalData="<tr>";
 178      for (i=0;i<vFirstDay;i++)
 179      {
 180          vCalData=vCalData+GenCell();
 181          vDayCount=vDayCount+1;
 182      }
 183      for (j=1;j<=Cal.GetMonDays();j++)
 184      {
 185          var strCell;
 186          vDayCount=vDayCount+1;
 187          if ((j==dtToday.getDate())&&(Cal.Month==dtToday.getMonth())&&(Cal.Year==dtToday.getFullYear()))
 188              strCell=GenCell(j,true,TodayColor);//Highlight today's date
 189          else
 190          {
 191              if (j==Cal.Date)
 192              {
 193                  strCell=GenCell(j,true,SelDateColor);
 194              }
 195              else
 196              {     
 197                  if (vDayCount%7==0)
 198                      strCell=GenCell(j,false,SaturdayColor);
 199                  else if ((vDayCount+6)%7==0)
 200                      strCell=GenCell(j,false,SundayColor);
 201                  else
 202                      strCell=GenCell(j,null,WeekDayColor);
 203              }        
 204          }                        
 205          vCalData=vCalData+strCell;
 206  
 207          if((vDayCount%7==0)&&(j<Cal.GetMonDays()))
 208          {
 209              vCalData=vCalData+"</tr>\n<tr>";
 210          }
 211      }
 212      docCal.writeln(vCalData);    
 213      //Time picker
 214      if (Cal.ShowTime)
 215      {
 216          var showHour;
 217          showHour=Cal.getShowHour();        
 218          vCalTime="<tr>\n<td colspan='7' align='center'>";
 219          vCalTime+="<input type='text' name='hour' maxlength=2 size=1 style=\"WIDTH: 22px\" value="+showHour+" onchange=\"javascript:winMain.Cal.SetHour(this.value)\">";
 220          vCalTime+=" : ";
 221          vCalTime+="<input type='text' name='minute' maxlength=2 size=1 style=\"WIDTH: 22px\" value="+Cal.Minutes+" onchange=\"javascript:winMain.Cal.SetMinute(this.value)\">";
 222          vCalTime+=" : ";
 223          vCalTime+="<input type='text' name='second' maxlength=2 size=1 style=\"WIDTH: 22px\" value="+Cal.Seconds+" onchange=\"javascript:winMain.Cal.SetSecond(this.value)\">";
 224          if (TimeMode==12)
 225          {
 226              var SelectAm =(parseInt(Cal.Hours,10)<12)? "Selected":"";
 227              var SelectPm =(parseInt(Cal.Hours,10)>=12)? "Selected":"";
 228  
 229              vCalTime+="<select name=\"ampm\" onchange=\"javascript:winMain.Cal.SetAmPm(this.options[this.selectedIndex].value);\">";
 230              vCalTime+="<option "+SelectAm+" value=\"AM\">AM</option>";
 231              vCalTime+="<option "+SelectPm+" value=\"PM\">PM<option>";
 232              vCalTime+="</select>";
 233          }    
 234          vCalTime+="\n</td>\n</tr>";
 235          docCal.write(vCalTime);
 236      }    
 237      //end time picker
 238      docCal.writeln("\n</table>");
 239      docCal.writeln("</form></body></html>");
 240      docCal.close();
 241  }
 242  
 243  function GenCell(pValue,pHighLight,pColor)//Generate table cell with value
 244  {
 245      var PValue;
 246      var PCellStr;
 247      var vColor;
 248      var vHLstr1;//HighLight string
 249      var vHlstr2;
 250      var vTimeStr;
 251      
 252      if (pValue==null)
 253          PValue="";
 254      else
 255          PValue=pValue;
 256      
 257      if (pColor!=null)
 258          vColor="bgcolor=\""+pColor+"\"";
 259      else
 260          vColor="";    
 261      if ((pHighLight!=null)&&(pHighLight))
 262          {vHLstr1="color='red'><b>";vHLstr2="</b>";}
 263      else
 264          {vHLstr1=">";vHLstr2="";}    
 265      
 266      if (Cal.ShowTime)
 267      {
 268          vTimeStr="winMain.document.getElementById('"+Cal.Ctrl+"').value+=' '+"+"winMain.Cal.getShowHour()"+"+':'+"+"winMain.Cal.Minutes"+"+':'+"+"winMain.Cal.Seconds";
 269          if (TimeMode==12)
 270              vTimeStr+="+' '+winMain.Cal.AMorPM";
 271      }    
 272      else
 273          vTimeStr="";        
 274      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>";
 275      return PCellStr;
 276  }
 277  
 278  function Calendar(pDate,pCtrl)
 279  {
 280      //Properties
 281      this.Date=pDate.getDate();//selected date
 282      this.Month=pDate.getMonth();//selected month number
 283      this.Year=pDate.getFullYear();//selected year in 4 digits
 284      this.Hours=pDate.getHours();    
 285      
 286      if (pDate.getMinutes()<10)
 287          this.Minutes="0"+pDate.getMinutes();
 288      else
 289          this.Minutes=pDate.getMinutes();
 290      
 291      if (pDate.getSeconds()<10)
 292          this.Seconds="0"+pDate.getSeconds();
 293      else        
 294          this.Seconds=pDate.getSeconds();
 295          
 296      this.MyWindow=winCal;
 297      this.Ctrl=pCtrl;
 298      this.Format="ddMMyyyy";
 299      this.Separator=DateSeparator;
 300      this.ShowTime=false;
 301      if (pDate.getHours()<12)
 302          this.AMorPM="AM";
 303      else
 304          this.AMorPM="PM";    
 305  }
 306  
 307  function GetMonthIndex(shortMonthName)
 308  {
 309      for (i=0;i<12;i++)
 310      {
 311          if (MonthName[i].substring(0,3).toUpperCase()==shortMonthName)
 312              return i;
 313      }
 314  }
 315  Calendar.prototype.GetMonthIndex=GetMonthIndex;
 316  
 317  function IncYear()
 318  {    Cal.Year++;}
 319  Calendar.prototype.IncYear=IncYear;
 320  
 321  function DecYear()
 322  {    Cal.Year--;}
 323  Calendar.prototype.DecYear=DecYear;
 324      
 325  function SwitchMth(intMth)
 326  {    Cal.Month=intMth;}
 327  Calendar.prototype.SwitchMth=SwitchMth;
 328  
 329  function SetHour(intHour)
 330  {    
 331      var MaxHour;
 332      var MinHour;
 333      if (TimeMode==24)
 334      {    MaxHour=23;MinHour=0}
 335      else if (TimeMode==12)
 336      {    MaxHour=12;MinHour=1}
 337      else
 338          alert("TimeMode can only be 12 or 24");        
 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      var showmonth;
 478      if( (this.Month+1) < 10 )
 479          showmonth = "0"+(this.Month+1);
 480      else
 481          showmonth = (this.Month+1);
 482      var showday;
 483      if( pDate < 10 )
 484          showday = "0"+pDate;
 485      else
 486          showday = pDate;
 487          
 488      if (this.Format.toUpperCase()=="DDMMYYYY")        
 489          return (showday+DateSeparator+showmonth+DateSeparator+this.Year);
 490      else if (this.Format.toUpperCase()=="DDMMMYYYY")
 491          return (pDate+DateSeparator+this.GetMonthName(false)+DateSeparator+this.Year);
 492      else if (this.Format.toUpperCase()=="MMDDYYYY")
 493          return (showmonth+DateSeparator+showday+DateSeparator+this.Year);
 494      else if (this.Format.toUpperCase()=="YYYYMMDD")        
 495          return (this.Year+DateSeparator+showmonth+DateSeparator+showday);
 496      else if (this.Format.toUpperCase()=="MMMDDYYYY")
 497          return (this.GetMonthName(false)+DateSeparator+pDate+DateSeparator+this.Year);            
 498  }
 499  Calendar.prototype.FormatDate=FormatDate;