Skip to content

Instantly share code, notes, and snippets.

@najlepsiwebdesigner

najlepsiwebdesigner/gist:f00af2b2dfbca6494d0a

Last active March 23, 2016 10:34
Show Gist options
  • Save najlepsiwebdesigner/f00af2b2dfbca6494d0a to your computer and use it in GitHub Desktop.
Save najlepsiwebdesigner/f00af2b2dfbca6494d0a to your computer and use it in GitHub Desktop.
Download ZIP
Foundation datepicker - no inputs
Raw
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment