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">
		<!-- CDN -->
		<script src="http://code.jquery.com/jquery.min.js"></script>
		<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
		<script src="http://cdnjs.cloudflare.com/ajax/libs/prettify/r224/prettify.js"></script>
		<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'>
		<!-- foundation start -->
		<!-- Set the viewport width to device width for mobile -->
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<!-- Included CSS Files (Compressed) -->
		<link rel="stylesheet" href="foundation/css/foundation.min.css">
<!-- 		<link rel="stylesheet" href="foundation/css/app.css"> -->
		<script src="foundation/js/vendor/custom.modernizr.js"></script>
		<!-- foundation end -->
		<!-- foundation datepicker start -->
		<script src="js/foundation-datepicker.js"></script>
		<link rel="stylesheet" href="stylesheets/foundation-datepicker.css">
		<!-- foundation datepicker end -->
		<link rel="stylesheet" href="stylesheets/example.css">
		<!--[if lt IE 9]>
			<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
		<![endif]-->
	</head>
	<body>
		<div class="container">
			<header class="row">
       <div class="small-12 columns">
				 <h1>Datepicker for Foundation</h1>
         <h2 class="subheader">foundation-datepicker.js</h2>
       </div>

			</header>
			<div class="row">
				<div class="small-3 columns" id="sidebar-wrap">
					 <h3>About</h3>

					<p>Foundation jQuery datepicker plugin!
						<ul>
							<li>
								<a href="http://foundation-datepicker.peterbeno.com/">project website</a>
							</li>
							<li>
								<a href="https://github.com/najlepsiwebdesigner/foundation-datepicker">forked project @github</a>
							</li>
						</ul>
					</p>
					<p>Based on best available datepicker in this galaxy - bootstrap-datepicker:
						<ul>
							<li>
								<a href="http://www.eyecon.ro/bootstrap-datepicker/">website</a>
							</li>
							<li>
								<a href="https://github.com/eternicode/bootstrap-datepicker">github</a>
							</li>
						</ul>
					</p>
					 <h4>Description:</h4>

					<ul>
						<li>can be used as a component</li>
						<li>formats: dd, d, mm, m, yyyy, yy</li>
						<li>separators: -, /, .</li>
					</ul>
					<div class="alert-box">
						<h6>Warning!</h6> 
						<br>This plugin uses really robust, tested base bootstrap-datepicker plugin, projects are now not in sync. This datepicker is based on old version of bootstrap-datepicker, but it works well. If you find an error, please report it to github. Thanks! :)</div>
					<p>
						<a href="https://twitter.com/share" class="twitter-share-button" data-via="benopeter">Tweet</a>
						<script>
							! function (d, s, id) {
								var js, fjs = d.getElementsByTagName(s)[0];
								if (!d.getElementById(id)) {
									js = d.createElement(s);
									js.id = id;
									js.src = "//platform.twitter.com/widgets.js";
									fjs.parentNode.insertBefore(js, fjs);
								}
							}(document, "script", "twitter-wjs");
						</script>
						<!-- Place this tag where you want the +1 button to render. -->
						<div class="g-plusone" data-annotation="inline" data-width="300"></div>
						<!-- Place this tag after the last +1 button tag. -->
						<script type="text/javascript">
							(function () {
								var po = document.createElement('script');
								po.type = 'text/javascript';
								po.async = true;
								po.src = 'https://apis.google.com/js/plusone.js';
								var s = document.getElementsByTagName('script')[0];
								s.parentNode.insertBefore(po, s);
							})();
						</script>
					</p>
				</div>
				<div class="small-9 columns">
					 <h2>Example</h2>

					<p>Attached to a field with the format specified via options.</p>
					<div class="panel">
						<input type="text" class="span2" value="02-16-2012" id="dp1">
					</div>
					<p>Attached to a field with the format specified via data tag and close button enabled.</p>
					<div class="panel">
						<input type="text" class="span2" value="02/16/12" data-date-format="mm/dd/yy" id="dp2">
					</div>
					<p>As component.</p>
					<div class="panel">
						<div class="row date collapse" id="dp3" data-date="12-02-2012" data-date-format="dd-mm-yyyy">
							<input class="small-3 columns" size="16" type="text" value="12-02-2012" readonly>	<span class="prefix small-2 columns end"><i class="fa fa-calendar"></i></span>

						</div>
					</div>
					<div class="panel highlight">
						<p>With large margin</p>
						<div class="panel">
							<input type="text" class="span2" value="02/16/12" data-date-format="mm/dd/yy" id="dp-margin">
						</div>
					</div>
					<p>Limit the view mode to months</p>
					<div class="panel">
						<div class="row collape date" id="dpMonths" data-date="102/2012" data-date-format="mm/yyyy" data-date-viewmode="years" data-date-minviewmode="months">
							<input class="small-3 columns" size="16" type="text" value="02/2012" readonly>	<span class="prefix small-1 columns end"><i class="fa fa-calendar"></i></span>

						</div>
					</div>
					<p>Attached to other element then field and using events to work with the date values.</p>
					<div class="panel">
						<div class="alert alert-box" id="alert">	<strong>Oh snap!</strong>

						</div>
						<table class="table">
							<thead>
								<tr>
									<th>Start date&nbsp;
										<a href="#" class="button small" id="dp4" data-date-format="yyyy-mm-dd" data-date="2012-02-20">Change</a>
									</th>
									<th>End date&nbsp;
										<a href="#" class="button small" 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>
					<p>Disabling dates in the past and dependent disabling.</p>
					<div class="panel">
						<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>
					</div>
					<script src="https://gist.github.com/najlepsiwebdesigner/4970984.js"></script>
					<hr>
					<hr>
					<h2>Using foundation-datepicker.js</h2>

					<p>Call the datepicker via javascript:</p> <pre class="prettyprint linenums" style="padding-left:50px;">$('.fdatepicker').fdatepicker()</pre>

					 <h3>Options</h3>

					<table class="table table-bordered table-striped">
						<thead>
							<tr>
								<th style="width: 100px;">Name</th>
								<th style="width: 50px;">type</th>
								<th style="width: 100px;">default</th>
								<th>description</th>
							</tr>
						</thead>
						<tbody>
							<tr>
								<td>format</td>
								<td>string</td>
								<td>'mm/dd/yyyy'</td>
								<td>the date format, combination of d, dd, m, mm, yy, yyyy.</td>
							</tr>
							<tr>
								<td>weekStart</td>
								<td>integer</td>
								<td>0</td>
								<td>day of the week start. 0 for Sunday - 6 for Saturday</td>
							</tr>
							<tr>
								<td>viewMode</td>
								<td>string|integer</td>
								<td>0 = 'days'</td>
								<td>set the start view mode. Accepts: 'days', 'months', 'years', 0 for days, 1 for months and 2 for years</td>
							</tr>
							<tr>
								<td>minViewMode</td>
								<td>string|integer</td>
								<td>0 = 'days'</td>
								<td>set a limit for view mode. Accepts: 'days', 'months', 'years', 0 for days, 1 for months and 2 for years</td>
							</tr>
						</tbody>
					</table>
					 <h3>Markup</h3>

					<p>Format a component.</p>
<pre class="prettyprint linenums"style="padding-left:50px;">
&lt;div class=&quot;input-append date&quot; id=&quot;dp3&quot; data-date=&quot;12-02-2012&quot; data-date-format=&quot;dd-mm-yyyy&quot;&gt;
  &lt;input class=&quot;span2&quot; size=&quot;16&quot; type=&quot;text&quot; value=&quot;12-02-2012&quot;&gt;
  &lt;span class=&quot;add-on&quot;&gt;&lt;i class=&quot;fa fa-th&quot;&gt;&lt;/i&gt;&lt;/span&gt;
&lt;/div&gt;
</pre>

					 <h3>Methods</h3>

					 <h4>.fdatepicker(options)</h4>

					<p>Initializes an datepicker.</p>
					 <h4>.fdatepicker('show')</h4>

					<p>Show the datepicker.</p>
					 <h4>.fdatepicker('hide')</h4>

					<p>Hide the datepicker.</p>
					 <h4>.fdatepicker('place')</h4>

					<p>Updates the date picker's position relative to the element</p>
					 <h4>.fdatepicker('update', value)</h4>

					<p>Updates the date picker's value. It can be a string in the specified format or a Date object.</p>
					 <h3>Events</h3>

					<p>Datepicker class exposes a few events for manipulating the dates.</p>
					<table class="table table-bordered table-striped">
						<thead>
							<tr>
								<th style="width: 150px;">Event</th>
								<th>Description</th>
							</tr>
						</thead>
						<tbody>
							<tr>
								<td>show</td>
								<td>This event fires immediately when the date picker is displayed.</td>
							</tr>
							<tr>
								<td>hide</td>
								<td>This event is fired immediately when the date picker is hidden.</td>
							</tr>
							<tr>
								<td>changeDate</td>
								<td>This event is fired when the date is changed.</td>
							</tr>
						</tbody>
					</table>
<pre class="prettyprint linenums"style="padding-left:50px;">
$(&#039;#dp5&#039;).fdatepicker()
  .on(&#039;changeDate&#039;, function(ev){
    if (ev.date.valueOf() &lt; startDate.valueOf()){
      ....
    }
  });
</pre>

				</div>
			</div>
			</section>
		</div>
		<script>
			$(function () {
				window.prettyPrint && prettyPrint();
				$('#dp1').fdatepicker({
					format: 'mm-dd-yyyy'
				});
				$('#dp2').fdatepicker({
					closeButton: true
				});
				$('#dp3').fdatepicker();
				$('#dp3').fdatepicker();
				$('#dp-margin').fdatepicker();
				$('#dpMonths').fdatepicker();
				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>
	</body>

</html>