« »

The advance date and time picker.

Label: Reference Calendar script

Demo
Enlarge
Reload
New window

Code
JavaScript
HTML
Print

Copy All x2

<SCRIPT language=Javascript>
<!-- Another application by Ira -->
<!-- Original Programmed by Ira Sterbakov - irasterb@erols.com 9/23/04 -->
<!-- May be freely used and modified - email notification would be nice -->

function MNDate()
	{
	var km = document.CalForm.month.selectedIndex - 1;
	if (km < 0 )
		{
		km = km + 12;
		document.CalForm.year.value--;
		}
	document.CalForm.month.selectedIndex = km;
	NDate();
	}

function MPDate()
	{
	var km = document.CalForm.month.selectedIndex + 1;
	if (km > 11)
		{
		km = km - 12;
		document.CalForm.year.value++;
		}
	document.CalForm.month.selectedIndex = km;
	NDate();
	}

function SToday()
	{
	document.CalForm.month.selectedIndex = (new Date()).getMonth();
	document.CalForm.year.value = (new Date()).getFullYear();
	NDate();
	}

function NDate()
	{
	var month = document.CalForm.month.selectedIndex;
	var year = document.CalForm.year.value;
	var MSDay = (new Date(year, month, 1)).getDay();
	var days = 31;
	if (month == 3 || month == 5 || month == 8 || month == 10) days=30;
	if (month == 1)
		{
		if (((year % 4)==0) && ((year % 100)!=0) || ((year % 400)==0)) {days = 29;}
		else { days = 28; }
		}
	var ki= 1;
	var ke = MSDay + days;
	for (i = 0; i < 42; i++)
			{
			eval("document.getElementById('nn" + i + "').innerHTML = '&nbsp;'");
			}

	for (i = MSDay ; i < ke; i++)
			{
			eval("document.getElementById('nn" + i + "').innerHTML = " + ki);
			ki++;
			}
	eval("document.getElementById('H1').innerHTML = '<b>" + document.CalForm.month.options[month].text
	 + ", " + year + "</b>'" );
	}

</SCRIPT>

<SCRIPT language=JavaScript>
<!-- Another application by Ira -->
<!-- Original Programmed by Ira Sterbakov - irasterb@erols.com 9/23/04 -->
<!-- May be freely used and modified - email notification would be nice -->

function SNow(I)
	{
	eval("document.DifForm.month" + I + ".selectedIndex = (new Date()).getMonth()");
	eval("document.DifForm.year" + I + ".value = (new Date()).getFullYear()");
	eval("document.DifForm.day" + I + ".value = (new Date()).getDate()");
	}

function DiffDate ()
	{
	var fday = new Date(document.DifForm.year1.value,document.DifForm.month1.selectedIndex,document.DifForm.day1.value);
	var eday = new Date(document.DifForm.year2.value,document.DifForm.month2.selectedIndex,document.DifForm.day2.value);
	var Totday = Math.ceil((eday.getTime()-fday.getTime())/(1000*60*60*24));
	eval("document.DifForm.Res.value = 'There are " + Totday + " days difference.'");
	}
</SCRIPT>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

Copy All x2

<SCRIPT language=JavaScript>
<!-- Another application by Ira -->
<!-- Original Programmed by Ira Sterbakov - irasterb@erols.com 9/23/04 -->
<!-- May be freely used and modified - email notification would be nice -->

var today = new Date();
var endofyear = new Date(today.getFullYear()-1, 11, 31);
var Tday = Math.ceil((today.getTime()-endofyear.getTime())/(1000*60*60*24)) - 1;
var W1day = Tday;
if( endofyear.getDay() <6) W1day += endofyear.getDay() + 1; 
Week = Math.ceil((W1day)/7);
document.write("<font size=3 color=#2020a0><b>Welcome To " + today.toLocaleString() + " - Day " + Tday);
document.write(" - Calendar Week " + Week + "</b></font>");
</SCRIPT>

<FORM name=CalForm><INPUT style="FONT-WEIGHT: bold; COLOR: white; BACKGROUND-COLOR: #000088" onclick=MNDate() type=button value="<<" name=MN> 
<SELECT style="FONT-WEIGHT: bold; COLOR: #000088" name=month> <OPTION 
  selected>January<OPTION>February<OPTION>March<OPTION>April<OPTION>May<OPTION>
June<OPTION>July<OPTION>August<OPTION>September<OPTION>October<OPTION>November<OPTION>

December</OPTION></SELECT> 
<INPUT style="FONT-WEIGHT: bold; COLOR: white; BACKGROUND-COLOR: #000088" onclick=MPDate() type=button value=">>" name=MP> 
<INPUT style="FONT-WEIGHT: bold; COLOR: white; BACKGROUND-COLOR: #000088" onclick=document.CalForm.year.value--;NDate() type=button value="<<" name=YN> 
<INPUT style="FONT-WEIGHT: bold; COLOR: #000088" maxLength=4 size=4 name=year> <INPUT style="FONT-WEIGHT: bold; COLOR: white; BACKGROUND-COLOR: #000088" onclick=document.CalForm.year.value++;NDate() type=button value=">>" name=YP> 
<INPUT style="FONT-WEIGHT: bold; COLOR: white; BACKGROUND-COLOR: #000088" onclick=NDate() type=button value="Get Date" name=new> 
<INPUT style="FONT-WEIGHT: bold; COLOR: white; BACKGROUND-COLOR: #000088" onclick=SToday() type=button value=Today! name=old> 
</FORM>
<TABLE bgColor=#8080ff border=5>
  <TBODY>
  <TR>
    <TD>
      <TABLE bgColor=#ddeeff border=2>

        <TBODY>
        <TR>
          <TD id=H1 align=middle bgColor=white>df</TD></TR>
        <TR>
          <TD>
            <TABLE style="FONT-WEIGHT: bold; COLOR: #101040; FONT-FAMILY: Arial" 
            cellSpacing=6 cellPadding=0 bgColor=#ddeeff border=0>
              <TBODY>
              <TR align=right>

                <TD><FONT color=#ff0000 size=4>S</FONT></TD>
                <TD><FONT color=#ff0000 size=4>M</FONT></TD>
                <TD><FONT color=#ff0000 size=4>T</FONT></TD>
                <TD><FONT color=#ff0000 size=4>W</FONT></TD>
                <TD><FONT color=#ff0000 size=4>T</FONT></TD>
                <TD><FONT color=#ff0000 size=4>F</FONT></TD>

                <TD><FONT color=#ff0000 size=4>S</FONT></TD></TR>
              <SCRIPT language=Javascript>
for (k = 0; k < 42; k = k + 7)
	{
	document.write("<tr align=right>");
	for (i = k; i < k + 7; i++)
		{
		document.write("<td id='nn" + i + "'>&nbsp;</td>");
		}
	document.write("</tr>");
	}
              </SCRIPT>
              </TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>
<SCRIPT language=Javascript>
SToday();
</SCRIPT>

<FORM name=DifForm><INPUT style="FONT-WEIGHT: bold; COLOR: white; BACKGROUND-COLOR: #000088" onclick=SNow(1) type=button value=Now name=FN> 
<SELECT style="FONT-WEIGHT: bold; COLOR: #000088" name=month1> <OPTION 
  selected>January<OPTION>February<OPTION>March<OPTION>April<OPTION>May<OPTION>

June<OPTION>July<OPTION>August<OPTION>September<OPTION>October<OPTION>November<OPTION>
December</OPTION></SELECT> 
<INPUT style="FONT-WEIGHT: bold; COLOR: #000088" maxLength=2 size=2 name=day1> 
<INPUT style="FONT-WEIGHT: bold; COLOR: #000088" maxLength=4 size=4 
name=year1><FONT size=+1> - to - </FONT><INPUT style="FONT-WEIGHT: bold; COLOR: white; BACKGROUND-COLOR: #000088" onclick=SNow(2) type=button value=Now name=FN2> 
<SELECT style="FONT-WEIGHT: bold; COLOR: #000088" name=month2> <OPTION 
  selected>January<OPTION>February<OPTION>March<OPTION>April<OPTION>May<OPTION>

June<OPTION>July<OPTION>August<OPTION>September<OPTION>October<OPTION>November<OPTION>
December</OPTION></SELECT> 
<INPUT style="FONT-WEIGHT: bold; COLOR: #000088" maxLength=2 size=2 name=day2> 
<INPUT style="FONT-WEIGHT: bold; COLOR: #000088" maxLength=4 size=4 
name=year2><BR><INPUT style="FONT-WEIGHT: bold; COLOR: white; BACKGROUND-COLOR: #000088" onclick=DiffDate() type=button value="Get Diff." name=new1> 
<INPUT size=30 name=Res> <INPUT style="FONT-WEIGHT: bold; COLOR: white; BACKGROUND-COLOR: #000088" onclick="SNow(1);SNow(2);document.DifForm.Res.value='';" type=button value=Reset> 
</FORM>
<SCRIPT language=Javascript>
SNow(1);
SNow(2);
</SCRIPT>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->