BSHIVAJI DOT NET PERSONAL NOTES: DATEPICKER.JS

//Javascript name: My Date Time Picker

//Date created: 16-Nov-2003 23:19

//Scripter: TengYong Ng

//Website: http://www.rainforestnet.com

//Copyright (c) 2003 TengYong Ng

//FileName: DateTimePicker.js

//Version: 0.8

//Contact: contact@rainforestnet.com

// Note: Permission given to use this script in ANY kind of applications if

// header lines are left unchanged.

//Global variables

var winCal;

var dtToday=new Date();

var Cal;

var docCal;

var MonthName=["January", "February", "March",
"April", "May", "June","July",

"August", "September", "October", "November",
"December"];

var WeekDayName=["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"];

var exDateTime;//Existing Date and Time

//Configurable parameters

var cnTop="200";//top coordinate of calendar window.

var cnLeft="500";//left coordinate of calendar window

var WindowTitle ="DateTime Picker";//Date Time Picker title.

var WeekChar=2;//number of character for week day. if 2 then Mo,Tu,We. if 3
then Mon,Tue,Wed.

var CellWidth=20;//Width of day cell.

var DateSeparator="-";//Date Separator, you can change it to "/"
if you want.

var TimeMode=24;//default TimeMode value. 12 or 24

var ShowLongMonth=true;//Show long month name in Calendar header. example:
"January".

var ShowMonthYear=true;//Show Month and Year in Calendar header.

var MonthYearColor="#cc0033";//Font Color of Month and Year in Calendar
header.

var WeekHeadColor="#0099CC";//Background Color in Week header.

var SundayColor="#6699FF";//Background color of Sunday.

var SaturdayColor="#CCCCFF";//Background color of Saturday.

var WeekDayColor="white";//Background color of weekdays.

var FontColor="blue";//color of font in Calendar day cell.

var TodayColor="#FFFF33";//Background color of today.

var SelDateColor="#FFFF99";//Backgrond color of selected date in textbox.

var YrSelColor="#cc0033";//color of font of Year selector.

var ThemeBg="";//Background image of Calendar window.

//end Configurable parameters

//end Global variable

function RenderCal()

{

var vCalHeader;

var vCalData;

var vCalTime;

var i;

var j;

var SelectStr;

var vDayCount=0;

var vFirstDay;

docCal.open();

docCal.writeln("<html><head><title>"+WindowTitle+"</title>");

docCal.writeln("<script>var winMain=window.opener;</script>");

docCal.writeln("</head><body background='"+ThemeBg+"'
link="+FontColor+" vlink="+FontColor+"><form name='Calendar'>");

vCalHeader="<table border=1 cellpadding=1 cellspacing=1 width='100%'
align=\"center\" valign=\"top\">\n";

//Month Selector

vCalHeader+="<tr>\n<td colspan='7'><table border=0 width='100%'
cellpadding=0 cellspacing=0><tr><td align='left'>\n";

vCalHeader+="<select name=\"MonthSelector\" onChange=\"javascript:winMain.Cal.SwitchMth(this.selectedIndex);winMain.RenderCal();\">\n";

for (i=0;i<12;i++)

{

if (i==Cal.Month)

SelectStr="Selected";

else

SelectStr="";

vCalHeader+="<option "+SelectStr+" value >"+MonthName[i]+"\n";

}

vCalHeader+="</select></td>";

//Year selector

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";

vCalHeader+="</tr>";

//Calendar header shows Month and Year

if (ShowMonthYear)

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";

//Week day header

vCalHeader+="<tr bgcolor="+WeekHeadColor+">";

for (i=0;i<7;i++)

{

vCalHeader+="<td align='center'><font face='Verdana' size='2'>"+WeekDayName[i].substr(0,WeekChar)+"</font></td>";

}

vCalHeader+="</tr>";

docCal.write(vCalHeader);

//Calendar detail

CalDate=new Date(Cal.Year,Cal.Month);

CalDate.setDate(1);

vFirstDay=CalDate.getDay();

vCalData="<tr>";

for (i=0;i<vFirstDay;i++)

{

vCalData=vCalData+GenCell();

vDayCount=vDayCount+1;

}

for (j=1;j<=Cal.GetMonDays();j++)

{

var strCell;

vDayCount=vDayCount+1;

if ((j==dtToday.getDate())&&(Cal.Month==dtToday.getMonth())&&(Cal.Year==dtToday.getFullYear()))

strCell=GenCell(j,true,TodayColor);//Highlight today's date

else

{

if (j==Cal.Date)

{

strCell=GenCell(j,true,SelDateColor);

}

else

{

if (vDayCount%7==0)

strCell=GenCell(j,false,SaturdayColor);

else if ((vDayCount+6)%7==0)

strCell=GenCell(j,false,SundayColor);

else

strCell=GenCell(j,null,WeekDayColor);

}

}

vCalData=vCalData+strCell;

if((vDayCount%7==0)&&(j<Cal.GetMonDays()))

{

vCalData=vCalData+"</tr>\n<tr>";

}

}

docCal.writeln(vCalData);

//Time picker

if (Cal.ShowTime)

{

var showHour;

showHour=Cal.getShowHour();

vCalTime="<tr>\n<td colspan='7' align='center'>";

vCalTime+="<input type='text' name='hour' maxlength=2 size=1 style=\"WIDTH:
22px\" value="+showHour+" onchange=\"javascript:winMain.Cal.SetHour(this.value)\">";

vCalTime+=" : ";

vCalTime+="<input type='text' name='minute' maxlength=2 size=1 style=\"WIDTH:
22px\" value="+Cal.Minutes+" onchange=\"javascript:winMain.Cal.SetMinute(this.value)\">";

vCalTime+=" : ";

vCalTime+="<input type='text' name='second' maxlength=2 size=1 style=\"WIDTH:
22px\" value="+Cal.Seconds+" onchange=\"javascript:winMain.Cal.SetSecond(this.value)\">";

if (TimeMode==12)

{

var SelectAm =(parseInt(Cal.Hours,10)<12)? "Selected":"";

var SelectPm =(parseInt(Cal.Hours,10)>=12)? "Selected":"";

vCalTime+="<select name=\"ampm\" onchange=\"javascript:winMain.Cal.SetAmPm(this.options[this.selectedIndex].value);\">";

vCalTime+="<option "+SelectAm+" value=\"AM\">AM</option>";

vCalTime+="<option "+SelectPm+" value=\"PM\">PM<option>";

vCalTime+="</select>";

}

vCalTime+="\n</td>\n</tr>";

docCal.write(vCalTime);

}

//end time picker

docCal.writeln("\n</table>");

docCal.writeln("</form></body></html>");

docCal.close();

}

function Calendar(pDate,pCtrl)

{

//Properties

this.Date=pDate.getDate();//selected date

this.Month=pDate.getMonth();//selected month number

this.Year=pDate.getFullYear();//selected year in 4 digits

this.Hours=pDate.getHours();

if (pDate.getMinutes()<10)

this.Minutes="0"+pDate.getMinutes();

else

this.Minutes=pDate.getMinutes();

if (pDate.getSeconds()<10)

this.Seconds="0"+pDate.getSeconds();

else

this.Seconds=pDate.getSeconds();

this.MyWindow=winCal;

this.Ctrl=pCtrl;

this.Format="ddMMyyyy";

this.Separator=DateSeparator;

this.ShowTime=false;

if (pDate.getHours()<12)

this.AMorPM="AM";

else

this.AMorPM="PM";

}

function IncYear()

{ Cal.Year++;}

Calendar.prototype.IncYear=IncYear;

function DecYear()

{ Cal.Year--;}

Calendar.prototype.DecYear=DecYear;

function SwitchMth(intMth)

{ Cal.Month=intMth;}

Calendar.prototype.SwitchMth=SwitchMth;

function SetMinute(intMin)

{

var MinExp=new RegExp("^\\d\\d$");

if (MinExp.test(intMin) && (intMin<60))

Cal.Minutes=intMin;

}

Calendar.prototype.SetMinute=SetMinute;

function SetSecond(intSec)

{

var SecExp=new RegExp("^\\d\\d$");

if (SecExp.test(intSec) && (intSec<60))

Cal.Seconds=intSec;

}

Calendar.prototype.SetSecond=SetSecond;

function SetAmPm(pvalue)

{

this.AMorPM=pvalue;

if (pvalue=="PM")

{

this.Hours=(parseInt(this.Hours,10))+12;

if (this.Hours==24)

this.Hours=12;

}

else if (pvalue=="AM")

this.Hours-=12;

}

Calendar.prototype.SetAmPm=SetAmPm;

function GetMonthName(IsLong)

{

var Month=MonthName[this.Month];

if (IsLong)

return Month;

else

return Month.substr(0,3);

}

Calendar.prototype.GetMonthName=GetMonthName;

function GetMonDays()//Get number of days in a month

{

var DaysInMonth=[31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];

if (this.IsLeapYear())

{

DaysInMonth[1]=29;

}

return DaysInMonth[this.Month];

}

Calendar.prototype.GetMonDays=GetMonDays;

function FormatDate(pDate)

{

if (this.Format.toUpperCase()=="DDMMYYYY")

return (pDate+DateSeparator+(this.Month+1)+DateSeparator+this.Year);

else if (this.Format.toUpperCase()=="DDMMMYYYY")

return (pDate+DateSeparator+this.GetMonthName(false)+DateSeparator+this.Year);

else if (this.Format.toUpperCase()=="MMDDYYYY")

return ((this.Month+1)+DateSeparator+pDate+DateSeparator+this.Year);

else if (this.Format.toUpperCase()=="MMMDDYYYY")

return (this.GetMonthName(false)+DateSeparator+pDate+DateSeparator+this.Year);

}

Calendar.prototype.FormatDate=FormatDate;

Labels

BSHIVAJI DOT NET PERSONAL NOTES

DATEPICKER.JS