Location: PHPKode > projects > Tech Tickets > technician/test.php
<HTML>
<HEAD>
	<TITLE>JavaScript Toolbox - Calendar Popup To Select Date</TITLE>
	<SCRIPT LANGUAGE="JavaScript" SRC="CalendarPopup.js"></SCRIPT>
	<SCRIPT LANGUAGE="JavaScript">
	var cal = new CalendarPopup();
	</SCRIPT>
	<SCRIPT LANGUAGE="JavaScript">document.write(getCalendarStyles());</SCRIPT>
</HEAD>
<BODY>

<FORM NAME="example">
(View Source of this page to see the example code)<br>
<INPUT TYPE="text" NAME="date1" VALUE="" SIZE=25>
<A HREF="#" onClick="cal.select(document.forms['example'].date1,'anchor1','MM/dd/yyyy'); return false;" NAME="anchor1" ID="anchor1">select</A>

<!-- ================================================================================== --><HR>

<SCRIPT LANGUAGE="JavaScript">
var cal1xx = new CalendarPopup("cal");
cal1xx.showNavigationDropdowns();
</SCRIPT>
<INPUT TYPE="text" NAME="fdate" VALUE="" SIZE=25>
<A HREF="#" onClick="cal1xx.select(document.forms[0].fdate,'anchor1xx','MM/dd/yyyy'); return false;" NAME="anchor1xx" ID="anchor1xx">select</A>

<SCRIPT LANGUAGE="JavaScript">
var cal1xx = new CalendarPopup("cal");
cal1xx.showNavigationDropdowns();
</SCRIPT>
<INPUT TYPE="text" NAME="tdate" VALUE="" SIZE=25>
<A HREF="#" onClick="cal1xx.select(document.forms[0].tdate,'anchor1xx','MM/dd/yyyy'); return false;" NAME="anchor2xx" ID="anchor2xx">select</A>


<DIV ID="cal" STYLE="position:absolute;visibility:hidden;background-color:white;layer-background-color:white;"></DIV>


<!-- ================================================================================== --><HR>

<SCRIPT LANGUAGE="JavaScript" ID="js15">
var cal15 = new CalendarPopup();
cal15.setReturnFunction("setMultipleValues4");
function setMultipleValues4(y,m,d) {
	document.forms[0].date15_year.value=y;
	document.forms[0].date15_month.selectedIndex=m;
	for (var i=0; i<document.forms[0].date15_date.options.length; i++) {
		if (document.forms[0].date15_date.options[i].value==d) {
			document.forms[0].date15_date.selectedIndex=i;
			}
		}
	}
var cal16 = new CalendarPopup();
cal16.setReturnFunction("setMultipleValues5");
function setMultipleValues5(y,m,d) {
	document.forms[0].date16_year.value=y;
	document.forms[0].date16_month.selectedIndex=m;
	for (var i=0; i<document.forms[0].date16_date.options.length; i++) {
		if (document.forms[0].date16_date.options[i].value==d) {
			document.forms[0].date16_date.selectedIndex=i;
			}
		}
	}
function getDateString(y_obj,m_obj,d_obj) {
	var y = y_obj.options[y_obj.selectedIndex].value;
	var m = m_obj.options[m_obj.selectedIndex].value;
	var d = d_obj.options[d_obj.selectedIndex].value;
	if (y=="" || m=="") { return null; }
	if (d=="") { d=1; }
	return str= y+'-'+m+'-'+d;
	}
</SCRIPT>

Start: <SELECT NAME="date15_month">
	<OPTION>
	<OPTION VALUE="Jan">January
	<OPTION VALUE="Feb">February
	<OPTION VALUE="Mar">March
	<OPTION VALUE="Apr">April
	<OPTION VALUE="May">May
	<OPTION VALUE="Jun">June
	<OPTION VALUE="Jul">July
	<OPTION VALUE="Aug">August
	<OPTION VALUE="Sep">September
	<OPTION VALUE="Oct">October
	<OPTION VALUE="Nov">November
	<OPTION VALUE="Dec">December
</SELECT>
 /
<SELECT NAME="date15_date">
	<OPTION>
	<OPTION VALUE="1">1
	<OPTION VALUE="2">2
	<OPTION VALUE="3">3
	<OPTION VALUE="4">4
	<OPTION VALUE="5">5
	<OPTION VALUE="6">6
	<OPTION VALUE="7">7
	<OPTION VALUE="8">8
	<OPTION VALUE="9">9
	<OPTION VALUE="10">10
	<OPTION VALUE="11">11
	<OPTION VALUE="12">12
	<OPTION VALUE="13">13
	<OPTION VALUE="14">14
	<OPTION VALUE="15">15
	<OPTION VALUE="16">16
	<OPTION VALUE="17">17
	<OPTION VALUE="18">18
	<OPTION VALUE="19">19
	<OPTION VALUE="20">20
	<OPTION VALUE="21">21
	<OPTION VALUE="22">22
	<OPTION VALUE="23">23
	<OPTION VALUE="24">24
	<OPTION VALUE="25">25
	<OPTION VALUE="26">26
	<OPTION VALUE="27">27
	<OPTION VALUE="28">28
	<OPTION VALUE="29">29
	<OPTION VALUE="30">30
	<OPTION VALUE="31">31
</SELECT>
<SELECT NAME="date15_year">
	<OPTION>
	<OPTION VALUE="2000">2000
	<OPTION VALUE="2001">2001
	<OPTION VALUE="2002">2002
	<OPTION VALUE="2003">2003
	<OPTION VALUE="2004">2004
	<OPTION VALUE="2005">2005
	<OPTION VALUE="2006">2006
</SELECT>
<A HREF="#" onClick="cal15.showCalendar('anchor15',getDateString(document.forms[0].date15_year,document.forms[0].date15_month,document.forms[0].date15_date)); return false;" TITLE="cal15.showCalendar('anchor15',getDateString(document.forms[0].date15_year,document.forms[0].date15_month,document.forms[0].date15_date)); return false;" NAME="anchor15" ID="anchor15">select</A>
&nbsp;&nbsp;&nbsp;
End: <SELECT NAME="date16_month">
	<OPTION>
	<OPTION VALUE="Jan">January
	<OPTION VALUE="Feb">February
	<OPTION VALUE="Mar">March
	<OPTION VALUE="Apr">April
	<OPTION VALUE="May">May
	<OPTION VALUE="Jun">June
	<OPTION VALUE="Jul">July
	<OPTION VALUE="Aug">August
	<OPTION VALUE="Sep">September
	<OPTION VALUE="Oct">October
	<OPTION VALUE="Nov">November
	<OPTION VALUE="Dec">December
</SELECT>
 /
<SELECT NAME="date16_date">
	<OPTION>
	<OPTION VALUE="1">1
	<OPTION VALUE="2">2
	<OPTION VALUE="3">3
	<OPTION VALUE="4">4
	<OPTION VALUE="5">5
	<OPTION VALUE="6">6
	<OPTION VALUE="7">7
	<OPTION VALUE="8">8
	<OPTION VALUE="9">9
	<OPTION VALUE="10">10
	<OPTION VALUE="11">11
	<OPTION VALUE="12">12
	<OPTION VALUE="13">13
	<OPTION VALUE="14">14
	<OPTION VALUE="15">15
	<OPTION VALUE="16">16
	<OPTION VALUE="17">17
	<OPTION VALUE="18">18
	<OPTION VALUE="19">19
	<OPTION VALUE="20">20
	<OPTION VALUE="21">21
	<OPTION VALUE="22">22
	<OPTION VALUE="23">23
	<OPTION VALUE="24">24
	<OPTION VALUE="25">25
	<OPTION VALUE="26">26
	<OPTION VALUE="27">27
	<OPTION VALUE="28">28
	<OPTION VALUE="29">29
	<OPTION VALUE="30">30
	<OPTION VALUE="31">31
</SELECT>
<SELECT NAME="date16_year">
	<OPTION>
	<OPTION VALUE="2000">2000
	<OPTION VALUE="2001">2001
	<OPTION VALUE="2002">2002
	<OPTION VALUE="2003">2003
	<OPTION VALUE="2004">2004
	<OPTION VALUE="2005">2005
	<OPTION VALUE="2006">2006
</SELECT>
<A HREF="#" onClick="var d=getDateString(document.forms[0].date16_year,document.forms[0].date16_month,document.forms[0].date16_date); cal16.showCalendar('anchor16',(d==null)?getDateString(document.forms[0].date15_year,document.forms[0].date15_month,document.forms[0].date15_date):d); return false;" TITLE="var d=getDateString(document.forms[0].date16_year,document.forms[0].date16_month,document.forms[0].date16_date); cal16.showCalendar('anchor16',(d==null)?getDateString(document.forms[0].date15_year,document.forms[0].date15_month,document.forms[0].date15_date):d); return false;" NAME="anchor16" ID="anchor16">select</A>



</FORM>
</BODY>
</HTML>



Return current item: Tech Tickets