example.html

<!doctype html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Foundation datepicker</title>
		<meta name="description" content="Port of bootstrap datepicker to Zurb Foundation framework">
		<meta name="author" content="Peter Beno, najlepsiwebdesigner@gmail.com">
		<link href="http://cdnjs.cloudflare.com/ajax/libs/prettify/r224/prettify.css" rel="stylesheet">
		<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,400,300,600,700&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<link rel="stylesheet" href="foundation/css/foundation.min.css">
		<!-- <link rel="stylesheet" href="foundation/fonts/foundation-icons.css"> -->
		<!-- foundation datepicker start -->
			<!-- DEPS -->
			<script src="http://code.jquery.com/jquery.min.js"></script>
			<!-- CDN - you can use font awesome or fonudation icon via this, or use your own version: -->
			<link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
			<!-- <link href="https://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css" rel="stylesheet"> -->
			<!-- DATEPICKER FILES -->
			<script src="js/foundation-datepicker.js"></script>
			<script src="js/locales/foundation-datepicker.vi.js"></script>
			
			<link rel="stylesheet" href="css/foundation-datepicker.min.css">
		<!-- foundation datepicker end -->
		<link rel="stylesheet" href="css/example.css">

		<script src="foundation/js/foundation.min.js"></script>
		<script src="foundation/js/foundation/foundation.magellan.js"></script>
		<!--[if lt IE 9]>
		<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
		<![endif]-->
	</head>
	<body>
	
		<div class="container"  style="background:#13a7c7;">
			<header class="row">
				<div class="small-12 columns">
					<h1>Foundation-datepicker.js <span style="color:#000">Examples</span></h1>
				</div>
			</header>
			</div>
		</div>
		<div class="container" style="background:#000;">
			<div class="row">
				<div class="small-12 columns" >
		<div data-magellan-expedition="fixed" >
		  <dl class="sub-nav">
		    <dd data-magellan-arrival="basic-example"><a href="#basic-example">Basic example</a></dd>
		    <dd data-magellan-arrival="advanced-example"><a href="#advanced-example">Data tags & close button</a></dd>
		    <dd data-magellan-arrival="time-example"><a href="#time-example">Time picker</a></dd>
		    <dd data-magellan-arrival="limited-example"><a href="#limited-example">Limited picker</a></dd>
		    <dd data-magellan-arrival="no-inputs-example"><a href="#no-inputs-example">Without inputs</a></dd>
		    <dd data-magellan-arrival="deps-example"><a href="#deps-example">Dependent pickers</a></dd>
		  </dl>
		</div>	

				</div>
			</div>
		</div>
<br><br>


		<div class="container">

			<div class="row">
				
				<div class="small-9 columns">
					
					


					<h4 data-magellan-destination="basic-example">Basic</h4>
					<a name="basic-example"></a>
					<p>Attached to a field with the format specified via options.</p>
					<input type="text" class="span2" value="02-12-1989" id="dp1">
					<hr>



					<h4 data-magellan-destination="advanced-example">Close button and data tags</h4>
					<a name="advanced-example"></a>
					<p>Attached to a field with the format specified via data tag and close button enabled.</p>
					<input type="text" class="span2" value="02/16/12" data-date-format="mm/dd/yy" id="dp2">
					<hr>

					<h4 data-magellan-destination="time-example">Time picker</h4>
					<a name="time-example"></a>
					<p>With time picking enabled and vietnamese language used.</p>
					<input type="text" class="span2" value="02-12-1989 12:05" id="dpt">
					<hr>

					<h4 data-magellan-destination="limited-example">Limited picker</h4>
					<a name="limited-example"></a>
					<p>Limit the view mode to months</p>
					<div class="row collapse date" id="dpMonths" data-date="102/2012" data-format="mm/yyyy" data-start-view="year" data-min-view="year" style="max-width:200px;">
						<div class="small-2 columns">	
							<span class="prefix"><i class="fi-calendar"></i></span>
						</div>
						<div class="small-10 columns">
							<input size="16" type="text" value="02/2012" readonly>	
						</div>
					</div>
					<hr>

					<h4 data-magellan-destination="no-inputs-example">No inputs</h4>
					<a name="no-inputs-example"></a>
					<p>Attached to other element then field and using events to work with the date values.</p>
					<table class="table">
						<thead>
							<tr>
								<th>Start date&nbsp;
									<a href="#" class="button tiny" id="dp4" data-date-format="yyyy-mm-dd" data-date="2012-02-20">Change</a>
								</th>
								<th>End date&nbsp;
									<a href="#" class="button tiny" id="dp5" data-date-format="yyyy-mm-dd" data-date="2012-02-25">Change</a>
								</th>
							</tr>
						</thead>
						<tbody>
							<tr>
								<td id="startDate">2012-02-20</td>
								<td id="endDate">2012-02-25</td>
							</tr>
						</tbody>
					</table>
					<div class="alert alert-box"  style="display:none;" id="alert">	<strong>Oh snap!</strong>
					</div>
					<hr>

					<h4 data-magellan-destination="deps-example">Dependent pickers</h4>
					<a name="deps-example"></a>					
					<p>Disabling dates in the past and dependent disabling.</p>
					<table class="table">
						<thead>
							<tr>
								<th>Check in:
									<input type="text" class="span2" value="" id="dpd1">
								</th>
								<th>Check out:
									<input type="text" class="span2" value="" id="dpd2">
								</th>
							</tr>
						</thead>
					</table>
					<script src="https://gist.github.com/najlepsiwebdesigner/4970984.js"></script>

					
				</div>
				<div class="small-3 columns" id="sidebar-wrap">

					<a href="https://github.com/najlepsiwebdesigner/foundation-datepicker" style="font-size:35px;text-decoration:none;display:block" class="button small"><i class="fa fa-github-alt"></i> Github</a>
					
					
					<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top" style="text-align:center;">
					<input type="hidden" name="cmd" value="_s-xclick">
					<input type="hidden" name="hosted_button_id" value="WARN3JGTYSUP8">
					<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_donateCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
					<img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
					</form>


					<script async src="http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
					<!-- Foundation datepicker -->
					<ins class="adsbygoogle"
					     style="display:block"
					     data-ad-client="ca-pub-5373512362092122"
					     data-ad-slot="3211306696"
					     data-ad-format="auto"></ins>
					<script>
					(adsbygoogle = window.adsbygoogle || []).push({});
					</script>					
				</div>
			</div>
			</section>

		</div>
		<script>
			$(function () {




$(document).foundation({
"magellan-expedition": {
  active_class: 'active', // specify the class used for active sections
  threshold: 0, // how many pixels until the magellan bar sticks, 0 = auto
  destination_threshold: 20, // pixels from the top of destination for it to be considered active
  throttle_delay: 50, // calculation throttling to increase framerate
  fixed_top: 0, // top distance in pixels assigend to the fixed element on scroll
  offset_by_height: true // whether to offset the destination by the expedition height. Usually you want this to be true, unless your expedition is on the side.
}
});






				window.prettyPrint && prettyPrint();
				$('#dp1').fdatepicker({
					format: 'mm-dd-yyyy',
					disableDblClickSelection: true
				});


				$('#dp2').fdatepicker({
					closeButton: true
				});
				$('#dp3').fdatepicker();


				$('#dpt').fdatepicker({
					format: 'mm-dd-yyyy hh:ii',
					disableDblClickSelection: true,
					language: 'vi',
					pickTime: true
				});

				// datepicker limited to months
				$('#dpMonths').fdatepicker();



				// implementation of custom elements instead of inputs
				var startDate = new Date(2012, 1, 20);
				var endDate = new Date(2012, 1, 25);
				$('#dp4').fdatepicker()
					.on('changeDate', function (ev) {
					if (ev.date.valueOf() > endDate.valueOf()) {
						$('#alert').show().find('strong').text('The start date can not be greater then the end date');
					} else {
						$('#alert').hide();
						startDate = new Date(ev.date);
						$('#startDate').text($('#dp4').data('date'));
					}
					$('#dp4').fdatepicker('hide');
				});
				$('#dp5').fdatepicker()
					.on('changeDate', function (ev) {
					if (ev.date.valueOf() < startDate.valueOf()) {
						$('#alert').show().find('strong').text('The end date can not be less then the start date');
					} else {
						$('#alert').hide();
						endDate = new Date(ev.date);
						$('#endDate').text($('#dp5').data('date'));
					}
					$('#dp5').fdatepicker('hide');
				});









				// implementation of disabled form fields
				var nowTemp = new Date();
				var now = new Date(nowTemp.getFullYear(), nowTemp.getMonth(), nowTemp.getDate(), 0, 0, 0, 0);
				var checkin = $('#dpd1').fdatepicker({
					onRender: function (date) {
						return date.valueOf() < now.valueOf() ? 'disabled' : '';
					}
				}).on('changeDate', function (ev) {
					if (ev.date.valueOf() > checkout.date.valueOf()) {
						var newDate = new Date(ev.date)
						newDate.setDate(newDate.getDate() + 1);
						checkout.update(newDate);
					}
					checkin.hide();
					$('#dpd2')[0].focus();
				}).data('datepicker');
				var checkout = $('#dpd2').fdatepicker({
					onRender: function (date) {
						return date.valueOf() <= checkin.date.valueOf() ? 'disabled' : '';
					}
				}).on('changeDate', function (ev) {
					checkout.hide();
				}).data('datepicker');
			});
		</script>


		<script type="text/javascript">
			var _gaq = _gaq || [];
			_gaq.push(['_setAccount', 'UA-30989810-2']);
			_gaq.push(['_trackPageview']);
			(function () {
				var ga = document.createElement('script');
				ga.type = 'text/javascript';
				ga.async = true;
				ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
				var s = document.getElementsByTagName('script')[0];
				s.parentNode.insertBefore(ga, s);
			})();
		</script>
		<script src="http://cdnjs.cloudflare.com/ajax/libs/prettify/r224/prettify.js"></script>
	</body>
</html>