[ 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: example91.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=" This example shows how you can set up a calendar to 'remember' the dates the user chose. Click the button in the first calendar and choose a date. Click the button in the second calendar and choose a different date. Click another demo and click on this one again. Notice that the dates you selected are saved. You can specify how many days you want the calendar to remember. The Reset button clears both dates. This feature is yet another way to make life easier for visitors to your web site. Often people come back several times to a web site to look at reservations and saving the dates saves them from having to type or click again. ">
	<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 - Saving Dates in Cookies</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/winxp.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;'>Saving Dates in Cookies</div>

		<div class='zpCalDemoText'>
		<ul>
		<li>This demo uses the <b>winxp theme</b>.</li>
		
		<li>This example shows how you can set up a calendar to "remember" the dates the user chose.</li>
		<li> Click the button in the first calendar and choose a date.</li>
		<li> Click the button in the second calendar and choose a different date. </li>
		<li> Click another demo and click on this one again. 
		<li> Notice that the dates you selected are saved. You can specify how many days you want the calendar to remember.</li>
		<li> The Reset button clears both dates. </li>
		<li> This feature is yet another way to make life easier for visitors to your web site. Often people come back several 
		times to a web site to look at reservations and saving the dates saves them from having to type or click again.</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="departure_date" />
					<input type="reset" value=" ... " id='button8a'>
				</td>
			</tr>
			<tr>
				<td class='zpCalSubheader'> 
					Check-out Date:
				</td>
				<td>
					<input type="text" name="date8b" id="arrivalDate" />
					<input type="reset" value=" ... " id='button8b'>
				</td>
			</tr>
			<tr>
				<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;
		var ONEDAY = 3600 * 24;

		function resetDates() {
			startDate = endDate = null;
			Zapatec.Utils.writeCookie(window.location.href + "--" + "button8a",value="",null, '/');
			Zapatec.Utils.writeCookie(window.location.href + "--" + "button8b",value="",null, '/');
		}
		/*
		* Given two dates (in seconds) find out if date1 is bigger, date2 is bigger or
		 * they're the same, taking only the dates, not the time into account.
		 * In other words, different times on the same date returns equal.
		 * returns -1 for date1 bigger, 1 for date2 is bigger 0 for equal
		 */
		
		function compareDatesOnly(date1, date2) {
			var year1 = date1.getYear();
			var year2 = date2.getYear();
			var month1 = date1.getMonth();
			var month2 = date2.getMonth();
			var day1 = date1.getDate();
			var day2 = date2.getDate();
		
			if (year1 > year2) {
				return -1;
			}
			if (year2 > year1) {
				return 1;
			}
		
			//years are equal
			if (month1 > month2) {
				return -1;
			}
			if (month2 > month1) {
				return 1;
			}
		
			//years and months are equal
			if (day1 > day2) {
				return -1;
			}
			if (day2 > day1) {
				return 1;
			}
		
			//days are equal
			return 0;
		
		
			/* Can't do this because of timezone issues
			var days1 = Math.floor(date1.getTime()/Date.DAY);
			var days2 = Math.floor(date2.getTime()/Date.DAY);
			return (days1 - days2);
			*/
		}
		
		function filterDates1(cal) {
			startDate = cal.date;
			/* 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     :    "arrivalDate",
					button         :    "button8b",  // What will trigger the popup of the calendar
					ifFormat       :    "%b %d, %Y",
					timeFormat     :    "24",
					date           :     startDate,
					saveDate       :    1,
					electric       :     false,
					showsTime      :     false,          //no time
					disableFunc    :    dateInRange2, //the function to call
					onUpdate       :    filterDates2
				});
			}
		}
		
		function filterDates2(cal) {
			endDate = cal.date;
		}
		
		/*
		* Both functions disable and hilight dates.
		*/
		
		/* 
		* Can't choose days after the
		* end date if it is choosen, hilights start and end dates with one style and dates between them with another
		*/
		function dateInRange1(date) {
		
			if (endDate != null) {
		
				// Disable dates after end date
				var compareEnd = compareDatesOnly(date, endDate);
				if  (compareEnd < 0) {
					return (true);
				}
		
				// Hilight end date with "edges" style
				if  (compareEnd == 0) {
					{return "edges";}
				}
		
		
				// Hilight inner dates with "between" style
				if (startDate != null){
					var compareStart = compareDatesOnly(date, startDate);
					if  (compareStart < 0) {
						return "between";
					} 
				} 
			}
		
			//disable days prior to today
			var today = new Date();
			var compareToday = compareDatesOnly(date, today);
			if (compareToday > 0) {
				return(true);
			}
		
		
			//all other days are enabled
			return false;
			//alert(ret + " " + today + ":" + date + ":" + compareToday + ":" + days1 + ":" + days2);
			return(ret);
		}
		
		/* 
		* Can't choose days before the
		* start date if it is choosen, hilights start and end dates with one style and dates between them with another
		*/
		
		function dateInRange2(date) {
			if (startDate != null) {
				// Disable dates before start date
				var compareDays = compareDatesOnly(startDate, date);
				if  (compareDays < 0) {
					return (true);
				}
		
				// Hilight end date with "edges" style
				if  (compareDays == 0) {
					{return "edges";}
				}
		
				// Hilight inner dates with "between" style
				if ((endDate != null) && (date > startDate) && (date < endDate)) {
					return "between";
				} 
			} 
		
			var now = new Date();
			if (compareDatesOnly(now, date) < 0) {
				return (true);
			}
		
			//all other days are enabled
			return false;
		}
		// end hiding contents from old browsers  -->
	</script>

		<script type="text/javascript">
		var cal = new Zapatec.Calendar.setup({
		
			inputField     :    "departure_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
			saveDate       :    2,            // save for two days
			electric       :     false,
			dateStatusFunc :    dateInRange1, //the function to call
			onUpdate       :    filterDates1

		});
		
		Zapatec.Calendar.setup({
			inputField     :    "arrivalDate",
			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
			saveDate       :    1,            // save for one day. You can use fractions here such as 1/2, 1/4, 1/24 ...
			electric       :     false,
			dateStatusFunc :    dateInRange2, //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>