Foundation datepicker - no inputs

gistfile1.html

<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>
<script>
$(function(){
  // 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');
	});
});
</script>