Ik ben opzoek naar een kalender die een periode kan selecteren. ik ben al een tijdje bezig geweest om op andere manieren op te lossen, maar ik loop steeds vast. De gebruiker moet een periode selecteren en er moet dan gecontrolleerd worden of er al iemand in de periode geboekt is.
"Restrict the range of selectable dates with theminDate and maxDateoptions. Set the beginning and end dates as actual dates (new Date(2009, 1 - 1, 26)), as a numeric offset from today (-20), or as a string of periods and units ('+1M +10D'). "
Ja dat heb ik gelezen, maar kom er niet echt verder mee.
Ik heb nu al wel een beetje gepuzzeld ermee. Nu is eigenlijk mijn vraag verandert, en is nu zo geworden, dat ik in de kalender wil laten zien welke data's niet beschikbaar zijn. Zoals nu ook gebeurt met die -20. Maar hoe kan ik dat het makkelijkste de data's van en tot eruit halen en in de kalender zetten?
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Datepicker - Met gezeserveerde datums</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
var your_dates = ['2013-06-20', '2013-06-22', '2013-06-24']; // deze gegevens genereer je met php
$(function() {
$( "#datepicker" ).datepicker({
altFormat: "yy-mm-dd",
dateFormat: "yy-mm-dd",
beforeShowDay: function(date) { // hier gaan we een extra css class toevoegen aan de dagen die al volzet zijn
// check if date is in your array of dates
var dateString = toDateFormat(date);
if($.inArray(dateString, your_dates) > -1) {
// if it is return the following.
return [false, 'volzet', 'Deze datum is niet meer beschikbaar']
}
return [true, '', ''];
}
});
});
/*
date formaat functies
*/
function toDateFormat(d) {
var curr_date = d.getDate();
var curr_month = d.getMonth() + 1; //Months are zero based
var curr_year = d.getFullYear();
return(curr_year + "-" + to2digits(curr_month) + "-" + to2digits(curr_date));
}
function to2digits(num) {
if (num < 10) {
return ('0' + num).toString();
}
return num.toString();
}
</script>
<style>
/* zet dit onder de andere andere css.*/
.volzet {
background-color: #00ffff;
}
</style>
</head>
<body>
<p>Date: <input type="text" id="datepicker" /></p>
</body>
</html>
Dus, op lijn 10 worden de gereserveerde datums opgelijst.
Met php zal dat iets zijn als
<?php
// zorg dat ze in een array staan
$dates = array('2013-06-20', '2013-06-22', '2013-06-24');
...
// lijn 10 javascript
echo "var your_dates = " . json_encode($dates). ";";
?>
