Voor een project op mijn werk ben ik recentelijk bezig geweest met het verbeteren van de datum selectie box. Hiervoor maak ik gebruik van de jQuery UI datepicker. In het voorbeeld hieronder laat ik jullie zien welke methode ik heb toegepast.
Voor op de website was ik op zoek naar een datum selectie box waarmee de gebruiker kan kiezen tussen beschikbare datums welk liggen tussen de datum van vandaag en een datum in de toekomst.
Hieronder heb ik de code van deze opzet voor je klaargezet. Het variabel availableDates bevat een lijst met alle datums die geactiveerd moeten worden binnen de kalender. Via het variabel maxDate geef je de einddatum aan.
<!doctype html>
<html>
<head>
<title>jQuery: Datepicker</title>
<link rel="stylesheet" href="jquery-ui.css">
</head>
<body>
<input type="input" class="datepicker" name="departureDate">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script>
$(function() {
var availableDates = ['10-8-2013', '12-8-2013', '21-8-2013'];
function available(date) {
dmy = date.getDate() + "-" + (date.getMonth()+1) + "-" + date.getFullYear();
if ($.inArray(dmy, availableDates) !== -1) {
return [true, "","Available"];
} else {
return [false,"","unAvailable"];
}
}
$.datepicker.regional['nl'];
$('input.datepicker').on('click', function() {
$(this).datepicker({
beforeShowDay: available,
dateFormat: 'dd-mm-yy',
minDate: new Date(),
maxDate: '01-12-2014',
showOn: 'focus'
}).focus();
});
});
</script>
</body>
</html>Bron: http://stackoverflow.com/questions/10972763/datepicker-only-show-certain-dates
