Datepicker Foundation
HTML
<link rel="stylesheet" href="http://davis-design.de/marktadresse/layout/css/foundation-datapicker.css">
<script src="http://davis-design.de/marktadresse/layout/js/foundation-datapicker.js"></script>
<input type="text" id="startDate" name="start_datum" class="input_text date" value="" >
<input type="text" id="endDate" name="end_datum" class="input_text" value="">
JavaScript
var nowTemp = new Date();
var now = new Date(nowTemp.getFullYear(), nowTemp.getMonth(), nowTemp.getDate(), 0, 0, 0, 0);
var checkin = jQuery('#startDate').fdatepicker({
format: "dd.mm.yyyy",
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()); // Remove the '+1' to mantain in the same date
checkout.update(newDate); //Change 'setValue' to 'update'
}
checkin.hide();
jQuery('#endDate')[0];
}).data('datepicker');
var checkout = jQuery('#endDate').fdatepicker({
format: "dd.mm.yyyy",
onRender: function (date) {
return date.valueOf() <= checkin.date.valueOf() ? 'disabled' : '';
}
}).on('changeDate', function (ev) {
checkout.hide();
}).data('datepicker');
jQuery("#startDate,#endDate").fdatepicker({
autoclose: true,
format: "dd.mm.yyyy",
language: 'de',
todayHighlight: false
});