JS Calendar Selector Code

function Popupcalendar (INSTANCENAME)
{
Global Tag
This.instancename=instancename;
Properties
This.separator= "-"
This.obtntodaytitle= "Today"
This.obtncanceltitle= "Cancel"
This.weekdaysting=new Array ("s", "M", "T", "W", "T", "F", "S");
This.monthsting=new Array ("January", "February", "March", "April", "may", "June", "July", "August", "September", "" October "," November "," December ");
This. width=200;
This.currdate=new Date ();
This.today=new Date ();
this.startyear=1970;
this.endyear=2010;
Css
This.normalfontcolor= "#666666";
This.selectedfontcolor= "Red";
This.divbordercss= "1px solid #BCD0DE";
This.titletablebgcolor= "#98B8CD";
This.tablebordercolor= "#CCCCCC"
Method
This. Init=calendarinit;
This. Fill=calendarfill;
This. Refresh=calendarrefresh;
This. Restore=calendarrestore;
Htmlobject
This.otaget=null;
This.opreviouscell=null;
This.sdivid=instancename+ "_div";
This.stableid=instancename+ "_table";
This.smonthid=instancename+ "_month";
This.syearid=instancename+ "_year";
This.stodaybtnid=instancename+ "_TODAYBTN";

}
function calendarinit ()///create panel
{
var smonth,syear
Smonth=this.currdate.getmonth ();
Syear=this.currdate.getyear ();
Htmlall= "<div id= '" +this.sdivid+ "' style= ' display:none;position:absolute;width:" +this. width+ "border:" +this.divbordercss+ ";p adding:2px;background-color: #FFFFFF ' > ';
htmlall+= "<div align= ' center ' >";
Month
Htmlomonth= "<select id=" "+this.smonthid+" ' Onchange=calendarmonthchange ("+this.instancename+") style= ' width : ">";
for (i=0;i<12;i++)
{
htmlomonth+= "<option value= '" +i+ "' >" +this.monthsting[i]+ "</option>";
}
htmlomonth+= "</select>";
Year
Htmloyear= "<select id=" "+this.syearid+" ' Onchange=calendaryearchange ("+this.instancename+") style= ' width:99 ' > ";
for (i=this.startyear;i<=this.endyear;i++)
{
htmloyear+= "<option value= '" +i+ "' >" +i+ "</option>";
}
htmloyear+= "</select></div>";
Day
htmlodaytable= "<table id=" "+this.stableid+" ' width= ' ' border=0 cellpadding=0 ' cellspacing=1 ' bgcolor= ' "+ this.tablebordercolor+ "' >";
htmlodaytable+= "<tbody bgcolor= ' #ffffff ' style= ' font-size:13px ' >";
for (i=0;i<=6;i++)
{
if (i==0)
htmlodaytable+= "<tr bgcolor= '" + This.titletablebgcolor + "' >";
Else
htmlodaytable+= "<tr>";
for (j=0;j<7;j++)
{

if (i==0)
{
htmlodaytable+= "<td height= ' align= ' center ' valign= ' middle ' style= ' Cursor:hand ' >";
htmlodaytable+=this.weekdaysting[j]+ "</td>"
}
Else
{
htmlodaytable+= "<td height= ' align= ' center ' valign= ' middle ' style= ' cursor:hand '";
htmlodaytable+= "Onmouseover=calendarcellsmsover (" +this.instancename+ ")";
htmlodaytable+= "Onmouseout=calendarcellsmsout (" +this.instancename+ ")";
htmlodaytable+= "Onclick=calendarcellsclick (This," +this.instancename+ ") >";
htmlodaytable+= "&nbsp;</td>"
}
}
htmlodaytable+= "</tr>";
}
htmlodaytable+= "</tbody></table>";
Today Button
htmlobutton= "<div align= ' center ' style= ' padding:3px ' >"
htmlobutton+= "<button id= '" +this.stodaybtnid+ "' style= ' width:80;border:1px solid #BCD0DE; background-color:# Eeeeee;cursor:hand ' "
htmlobutton+= "Onclick=calendartodayclick" ("+this.instancename+") > "+this.obtntodaytitle+" </button>& nbsp; "
htmlobutton+= "<button style= ' width:80;border:1px solid #BCD0DE; Background-color: #eeeeee; Cursor:hand '"
htmlobutton+= "Onclick=calendarcancel (" +this.instancename+ ") >" +this.obtncanceltitle+ "</button>"
htmlobutton+= "</div>"
All
htmlall=htmlall+htmlomonth+htmloyear+htmlodaytable+htmlobutton+ "</div>";
document.write (Htmlall);
This. Fill ();
}
function Calendarfill ()///
{
var smonth,syear,sweekday,stoday,otable,currrow,maxday,idaysn,sindex,rowindex,cellindex,oselectmonth, Oselectyear
Smonth=this.currdate.getmonth ();
Syear=this.currdate.getyear ();
sweekday= (New Date (syear,smonth,1)). Getday ();
Stoday=this.currdate.getdate ();
Idaysn=1
Otable=document.all[this.stableid];
CURRROW=OTABLE.ROWS[1];
Maxday=calendargetmaxday (Syear,smonth);

Oselectmonth=document.all[this.smonthid]
Oselectmonth.selectedindex=smonth;
Oselectyear=document.all[this.syearid]
for (i=0;i<oselectyear.length;i++)
{
if (parseint (oselectyear.options[i].value) ==syear) oselectyear.selectedindex=i;
}
////
for (rowindex=1;rowindex<=6;rowindex++)
{
if (idaysn>maxday) break;
Currrow = Otable.rows[rowindex];
CellIndex = 0;
if (rowindex==1) cellindex = Sweekday;
for (; cellindex<currrow.cells.length;cellindex++)
{
if (idaysn==stoday)
{
Currrow.cells[cellindex].innerhtml= "<font color=" "+this.selectedfontcolor+" ' ><i><b> "+idaysn+" </b></i></font> ";
This.opreviouscell=currrow.cells[cellindex];
}
Else
{
CURRROW.CELLS[CELLINDEX].INNERHTML=IDAYSN;
Currrow.cells[cellindex].style.color=this.normalfontcolor;
}
Calendarcellsetcss (0,currrow.cells[cellindex]);
idaysn++;
if (idaysn>maxday) break;
}
}
}
function Calendarrestore ()///Clear Data
{
var i,j,otable
Otable=document.all[this.stableid]
for (i=1;i<otable.rows.length;i++)
{
for (j=0;j<otable.rows[i].cells.length;j++)
{
Calendarcellsetcss (0,otable.rows[i].cells[j]);
Otable.rows[i].cells[j].innerhtml= "&nbsp;";
}
}
}
function Calendarrefresh (newdate)///
{
This.currdate=newdate;
This. Restore ();
This. Fill ();
}
function Calendarcellsmsover (oinstance)///Cell MouseOver
{
var MyCell = event.srcelement;
Calendarcellsetcss (0,oinstance.opreviouscell);
if (MyCell)
{
Calendarcellsetcss (1,mycell);
Oinstance.opreviouscell=mycell;
}
}
function Calendarcellsmsout (oinstance)//////Cell mouseout
{
var MyCell = event.srcelement;
Calendarcellsetcss (0,mycell);
}
function Calendaryearchange (oinstance)///Year change
{
var sday,smonth,syear,newdate
Sday=oinstance.currdate.getdate ();
Smonth=oinstance.currdate.getmonth ();
Syear=document.all[oinstance.syearid].value
Newdate=new Date (Syear,smonth,sday);
Oinstance.refresh (newdate);
}
function Calendarmonthchange (oinstance)///Month Change
{
var sday,smonth,syear,newdate
Sday=oinstance.currdate.getdate ();
Smonth=document.all[oinstance.smonthid].value
Syear=oinstance.currdate.getyear ();
Newdate=new Date (Syear,smonth,sday);
Oinstance.refresh (newdate);
}
function Calendarcellsclick (ocell,oinstance)
{
var sday,smonth,syear,newdate
Syear=oinstance.currdate.getfullyear ();
Smonth=oinstance.currdate.getmonth ();
Sday=oinstance.currdate.getdate ();
if (ocell.innertext!= "")
{
Sday=parseint (Ocell.innertext);
if (Sday!=oinstance.currdate.getdate ())
{
Newdate=new Date (Syear,smonth,sday);
Oinstance.refresh (newdate);
}
}
Sdatestring=syear+oinstance.separator+calendardblnum (smonth+1) +oinstance.separator+calendardblnum (SDay); Return sdatestring
if (oInstance.oTaget.tagName.toLowerCase () = = "Input") OInstance.oTaget.value = sdatestring;
Calendarcancel (oinstance);
return sdatestring;
}
function Calendartodayclick (oinstance)///' Today ' button change
{
Oinstance.refresh (New Date ());
}
function getDateString (oinputsrc,oinstance)
{
if (oinputsrc&&oinstance)
{
var calendardiv=document.all[oinstance.sdivid];
OINSTANCE.OTAGET=OINPUTSRC;
Calendardiv.style.pixelleft=calendargetpos (OINPUTSRC, "left");
Calendardiv.style.pixeltop=calendargetpos (OINPUTSRC, "top") + Oinputsrc.offsetheight;
Calendardiv.style.display= (calendardiv.style.display== "None")? "": "None";
}
}
function Calendarcellsetcss (Smode,ocell)///Set Cell Css
{
Smode
0:onmouserout 1:onmouseover
if (Smode)
{
Ocell.style.border= "1px solid #5589AA";
Ocell.style.backgroundcolor= "#BCD0DE";
}
Else
{
Ocell.style.border= "1px solid #FFFFFF";
Ocell.style.backgroundcolor= "#FFFFFF";
}
}
function Calendargetmaxday (nowyear,nowmonth)///get Maxday to current month
{
var nextmonth,nextyear,currdate,nextdate,themaxday
nextmonth=nowmonth+1;
if (nextmonth>11)
{
nextyear=nowyear+1;
nextmonth=0;
}
Else
{
Nextyear=nowyear;
}
Currdate=new Date (nowyear,nowmonth,1);
Nextdate=new Date (nextyear,nextmonth,1);
themaxday= (nextdate-currdate)/(24*60*60*1000);
return themaxday;
}
function Calendargetpos (el,epro)///get absolute Position
{
var epos=0;
while (El!=null)
{
epos+=el["offset" +epro];
El=el.offsetparent;
}
return ePos;
}
function Calendardblnum (num)
{
if (Num < 10)
Return "0" +num;
Else
return num;
}
function Calendarcancel (oinstance)///cancel
{
var calendardiv=document.all[oinstance.sdivid];
Calendardiv.style.display= "None";
}