[ 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: example81.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. Electric is set to false, so the dates are not updated when you scroll forwards or backwards in months and years You cannot choose a date 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. After you choose the check-in and the check-out dates, the range between them is highlighted Disabled dates are strike-through rather than faded dates. ">
	<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 Highlight the Dates in Between</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/win2k.css" rel="stylesheet" type="text/css">

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

      <style type="text/css">
         /*
         Define elements to show start/end dates and the dates in between
         */

         /*
         * for start/end dates
         */
         .edges {
            border : 1px solid;
            border-color: #adaa9c #fff #fff #adaa9c;
            background-color: #fffbee;
         }

         /*
         * for dates between start and end dates
         */
         .between {
            background-color: #dccdb9;
         }

         .calendar tbody .disabled { text-decoration: line-through; color:#000}
      </style>


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

		<div class='zpCalDemoText'>
		<ul>
		<li>This demo uses the <b>win2k theme</b>.</li>
		
		<li> Click the '..' button to activate calendar. </li>
		<li> Electric is set to false, so the dates are not updated when you scroll forwards or backwards in months and years </li>
		<li> You cannot choose a date 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>
		<li> After you choose the check-in and the check-out dates, the range between them is highlighted</li>
		<li> Disabled dates are strike-through rather than faded dates. </li>

		</ul>
		</div>



	<form name="form1" action="#" method="POST" onReset='resetDates()'> 
		<table>
			<tr>
				<td class='zpCalSubheader'> 
					Location: 
				</td>
				<td>
					<input type="text" name="location" id="location" />
				</td>
			</tr>
			<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="submit" name="Submit2" value="Check" class="button" onFocus="if(this.blur)this.blur()">
				</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;
			var callbacks = 0;

			function resetDates() {
				startDate = endDate = 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       :    "%Y-%m-%d ",
						timeFormat     :    "24",
						date           :     startDate,
						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       :    "%Y-%m-%d ",       // format of the input field
				timeFormat     :    "24",
				showsTime      :     false,          //no time
				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       :    "%Y-%m-%d ",
				timeFormat     :    "24",
				showsTime      :     false,          //no time
				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>