[ Mini Kiebo ]

Server: Windows NT DESKTOP-5B8S0D4 6.2 build 9200 (Windows 8 Professional Edition) i586 Path: D:/Backup/05122024/htdocs/simpeg/zapatec/zpcal/zpcal/demo/ [ Home ]
File: example8.html



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
	<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">

	<meta name="description" content=" Click the '...' button to activate calendar. You cannot choose days prior to today. You cannot choose a check-out date prior to the check-in date. Clicking the Reset button clears the dates. The default date in the Check-out calendar is the date chosen in the Check-in calendar. This is useful when the Check-in date is several months in the future, so the user doesn't need to scroll twice. ">
	<meta name="keywords" content="dhtml tools,javascript,DHTML Tools,Javascript,ajax,AJAX,Ajax,ajax tools,AJAX Tools,tools controls,simple javascript tools">
	<title>Zapatec DHTML Calendar Widget - Two Coordinated Dates</title>

	<!-- Common JS files -->
	<script type='text/javascript' src='../../utils/zapatec.js'></script>

	<!-- Custom includes -->	
		<!-- import the calendar script -->
		<script type="text/javascript" src="../src/calendar.js"></script>

		<!-- import the language module -->
		<script type="text/javascript" src="../lang/calendar-en.js"></script>

		<!-- other languages might be available in the lang directory; please check
		your distribution archive. -->


	<!-- ALL demos need these css -->
	<link href="../../website/css/zpcal.css" rel="stylesheet" type="text/css">
	<link href="../../website/css/template.css" rel="stylesheet" type="text/css">
	<style type="text/css">
		body {
			width: 778px;
		}
	</style>

	<!-- Theme css -->
	<link href="../themes/system.css" rel="stylesheet" type="text/css">

	<link rel="SHORTCUT ICON" href="http://www.zapatec.com/website/main/favicon.ico">
	


</head>
<body>	<div class='zpCalSubHeader' style='text-align:center;'>Two Coordinated Dates</div>

		<div class='zpCalDemoText'>
		<ul>
		<li>This demo uses the <b>system theme</b>.</li>
		
		<li> Click the '...' button to activate calendar. </li>
		<li> You cannot choose days prior to today. </li>
		<li> You cannot choose a check-out date prior to the check-in date. </li>
		<li> Clicking the Reset button clears the dates. </li>
		<li> The default date in the Check-out calendar is the date chosen in the Check-in calendar. This is useful when the Check-in date is several months in the future, so the user doesn't need to scroll twice.</li>

		</ul>
		</div>



	<form name="form1" action="" method="POST" onReset='resetDates()'> 
		<table>
			<tr>
				<td class='zpCalSubheader'> 
					Check-in Date:
				</td>
				<td>
					<input type="text" name="date8a" id="checkIn_date" />
					<input type="reset" value=" ... " id='button8a'>
				</td>
			</tr>
			<tr>
				<td class='zpCalSubheader'> 
					Check-out Date:
				</td>
				<td>
					<input type="text" name="date8b" id="checkOut_date" />
					<input type="reset" value=" ... " id='button8b'>
				</td>
			</tr>
			<tr>
				<td>
					<input type="submit" name="Submit2" value="Check" class="button" onFocus="if(this.blur)this.blur()" title='This button would submit results to the server'>
				</td>
				<td>

					<input type="reset" name="Submit22" value="Reset" class="button" onFocus="if(this.blur)this.blur()"> 
				</td>
			</tr>
		</table>
	</form>
	<script type="text/javascript">
		<!--  to hide script contents from old browsers
		var startDate;
		var endDate;

		function resetDates() {
			startDate = endDate = null;
		}

		function filterDates1(cal) {
			startDate = new Date(cal.date)
			startDate.setHours(0,0,0,0)	// used for compares without TIME
			/* If they haven't chosen an 
			end date before we'll set it to the same date as the start date This
			way if the user scrolls in the start date 5 months forward, they don't
			need to do it again for the end date.
			*/

			if (endDate == null) { 
				Zapatec.Calendar.setup({
					inputField     :    "checkOut_date",
					button         :    "button8b",  // What will trigger the popup of the calendar
					ifFormat       :    "%b %d, %Y",
					date           :     cal.date,
					showsTime      :     false,          //no time
					dateStatusFunc		:    disallowDateBefore, //the function to call
					onUpdate       :    filterDates2
				});
			}
		}

		function filterDates2(cal) {
			var date = cal.date;
			endDate = new Date(cal.date)
			endDate.setHours(0,0,0,0)	// used for compares without TIME
		}

		/*
		* This functions return true to disallow a date
		* and false to allow it.
		*/


		/* 
		* Check-Out calendar allowed dates
		* Check-Out date can not be BEFORE Check-In date
		* Check-Out date can not be before today
		*/
		function disallowDateBefore(dateCheckOut) {
			dateCheckOut.setHours(0,0,0,0)
			if ((startDate != null) && startDate > dateCheckOut)
				// startDate is defined, make sure cal date is NOT before start date
				return true; 
			
			var now = new Date()
			now.setHours(0,0,0,0)
			if (dateCheckOut < now) 
				// check out date can not be befor today if startDate NOT defined
				return true;

			return false;
		}

		/* 
		* Check-In date checking
		* Check-In date can not be AFTER Check-Out date
		* Check-In date can not be before today
		*/
		function disallowDateAfter(dateCheckIn) {
			dateCheckIn.setHours(0,0,0,0)
			if ((endDate != null) && dateCheckIn > endDate)
				// endDate defined, calendar date can NOT be after endDate
				return true;

			var now = new Date()
			now.setHours(0,0,0,0)

			if (dateCheckIn < now)
				// endDate NOT defined, calendar date can not be before today
				return true;

			return false;
		}

		// end hiding contents from old browsers  -->
	</script>

		<script type="text/javascript">
		var cal = new Zapatec.Calendar.setup({
		
         inputField     :    "checkIn_date",   // id of the input field
         button         :    "button8a",  // What will trigger the popup of the calendar
         ifFormat       :    "%b %d, %Y",       // format of the input field: Mar 18, 2005
         showsTime      :     false,          //no time
         dateStatusFunc    :    disallowDateAfter, //the function to call
         onUpdate       :    filterDates1

		});
		
      Zapatec.Calendar.setup({
         inputField     :    "checkOut_date",
         button         :    "button8b",  // What will trigger the popup of the calendar
         ifFormat       :    "%b %d, %Y",       // format of the input field: Mar 18, 2005
         showsTime      :     false,          //no time
         dateStatusFunc    :    disallowDateBefore, //the function to call
         onUpdate       :    filterDates2
      });

	</script>


	<noscript>
		<br/>
		This page uses an <a href='http://www.zapatec.com/website/main/products/suite/'>
		AJAX Component</a> - Zapatec DHTML Calendar Widget, but your browser does not support Javascript.
		<br/>
		<br/>
	</noscript>      
		<br/><br/><br/>
		<div class="footer" style='width: 778px; text-align:center; margin-top:2em'>
		&copy; 2004-2007 <strong> <a href='http://www.zapatec.com/'>Zapatec, Inc.</a> </strong>
		</div>
</body>
</html>