Multi-Date Picker

Chu GShou-Chih Nov 1, 2004

This script allows you to simply pick dates by clicking the date of the dynamic calendar. Users can cancel their selection by re- clicking the date you have selected. The dates you picked will show on the textarea beside the calendar.

The JavaScript Source: Forms: Multi-Date Picker

Simply click inside the window below, use your cursor to highlight the script, and copy (type Control-c or Apple-c) the script into a new file in your text editor (such as Note Pad or Simple Text) and save (Control-s or Command-s). The script is yours!!!

<!-- TWO STEPS TO INSTALL MULTI-DATE PICKER:

1.  Copy the coding into the HEAD of your HTML document
  2.  Add the last code into the BODY of your HTML document  -->

<HEAD>

</HEAD>

<BODY>

<script language="JavaScript" for=window event=onload>
			var dCurDate = new Date();
			frmCalendarSample.tbSelMonth.options[dCurDate.getMonth()].selected = true;
			for (i = 0; i < frmCalendarSample.tbSelYear.length; i++){
				if (frmCalendarSample.tbSelYear.options[i].value == dCurDate.getFullYear())
					frmCalendarSample.tbSelYear.options[i].selected = true;
			}
		</script>
		<form name="frmCalendarSample" method="post" action="">
    
		<table border="1" style="font-size:12px;font-family:arial;">
			<tr bgcolor=#FFFF99>
				<td colspan=2 align=center>
					  Year:
					<select name="tbSelYear" onchange='fUpdateCal(frmCalendarSample.tbSelYear.value, frmCalendarSample.tbSelMonth.value)'>
						<option value="1998">1998</option>
						<option value="1999">1999</option>
						<option value="2000">2000</option>
						<option value="2001">2001</option>
						<option value="2002">2002</option>
						<option value="2003">2003</option>
						<option value="2004">2004</option>
						<option value="2005">2005</option>
						<option value="2006">2006</option>
						<option value="2007">2007</option>
						<option value="2008">2008</option>
						<option value="2009">2009</option>
						<option value="2010">2010</option>
						<option value="2011">2011</option>
					</select>
						Month:
					<select name="tbSelMonth" onchange='fUpdateCal(frmCalendarSample.tbSelYear.value, frmCalendarSample.tbSelMonth.value)'>
						<option value="1">January</option>
						<option value="2">February</option>
						<option value="3">March</option>
						<option value="4">April</option>
						<option value="5">May</option>
						<option value="6">June</option>
						<option value="7">July</option>
						<option value="8">August</option>
						<option value="9">September</option>
						<option value="10">October</option>
						<option value="11">November</option>
						<option value="12">December</option>
					</select>
				</td>
			</tr>
			<tr bgcolor="#ccd4ee">
				<td>
					<script language="JavaScript">
						var dCurDate = new Date();
						var arySeletedDate=new Array();
						fDrawCal(dCurDate.getFullYear(), dCurDate.getMonth()+1, 30, 30, "12px", "bold", 1);
					</script>
				</td>
				<td bgcolor="#ccd4ee">
					<textarea id=traDate name=traDate readonly style="width:170px;height:210px;" value=""></textarea>
				</td>
			</tr>
			<tr bgcolor=#FFFF99>
				<td colspan=2 align=center>
					<input type=button onclick="javascript:fSubmit();" VALUE="Submit" style="font-family:arial;">
					<input type=button onclick="location.reload();" VALUE="RESET!" style="font-family:arial;">
				</td>
			</tr>
			<tr bgcolor="FFF999">
				<td colspan=2 align=center>
					<select id=cboDate name=cboDate readonly >
						<option value="-1">--Date--</option>
					</select>
				</td>
			</tr>
		</table>
		<font size=2 color=#003322>
			**Click the date of the calendar to pick it, re-click it to cancel it from the list.
		</font>
	</form>
</html>
<script language=javascript>
	function gAddCboItem(objCbo,vntItemArray){
		for(i=0;i<=vntItemArray.length-1;i++){
			var newitem = document.createElement("OPTION");
			newitem.value = vntItemArray[i][0];
			newitem.text  = vntItemArray[i][1];
			if (navigator.appName=="Netscape") objCbo.appendChild(newitem);
			else objCbo.options.add(newitem);   
		}
		if (vntItemArray.length>0){
			objCbo.selectedIndex = 0
			objCbo.options[objCbo.selectedIndex].selected=false;
		}
	}
	function gClearCbo(selectObj){
		count=selectObj.options.length;
		//******** You must proceed this function, or IE5 won't ends normally.
		for (i=count-1;i>=0;i--) selectObj.options[i].selected=false;
		//*********************************************************
		for (i=count-1; i>=0; i--) {
			selectObj.remove(i);
			if (navigator.appName=="Netscape") {
				if (selectObj.childNodes[i]!=null) selectObj.removeChild(selectObj.childNodes[i]);
			}
			else {
				if (selectObj.options[i]!=null) selectObj.options.remove(i);
			}
		}
	}
	function fSubmit(){
		var strReturnVal="";
		var arySelectedDays=new Array();
		strReturnVal=EnterToBR(document.all.traDate.value);
		strReturnVal=strReturnVal.substr(0,strReturnVal.length-4);

arySelectedDays=strReturnVal.split("<br>");

arySelectedDays=arySelectedDays.sort();
		var aryCboItems=new Array();
		for(var i=0;i<arySelectedDays.length;i++){
			aryCboItems[i]=new Array();
			aryCboItems[i][0]=arySelectedDays[i];
			aryCboItems[i][1]=arySelectedDays[i];
		}
		gClearCbo(document.all.cboDate);
		gAddCboItem(document.all.cboDate,aryCboItems);
	}
</script>

<p><center>
<font face="arial, helvetica" size"-2">Free JavaScripts provided<br>
by <a href="http://javascriptsource.com">The JavaScript Source</a></font>
</center><p>

Did you use this script? Do you like this site? Please link to us!

Leave a Response

(0 comments)

Alphabetical Listing

Tutorials

Ajax Tutorials

Ajax

Buttons

Cookies

CSS

Forms

Games

Generators

Image Effects

Math Related

Miscellaneous

Multimedia

Navigation

Page Details

Password

Snippets

Text Effects

Time & Date

User Details

Multi-Date Picker

Leave a Response

Attention JavaScript Coders

Go Deeper