jQuery UI: datepicker

Estimated read time 2 min read

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

Vond je dit een leuk blog artikel dan is een reactie altijd welkom: Klik hier om een reactie achter te laten.

Abonneer je op dit blog d.m.v. e-mail

Meld je hieronder aan met jouw e-mailadres en ontvang als eerste een mailtje wanneer er een nieuw artikel online gaat op mijn blog.

Voeg je bij 12 andere abonnees

You May Also Like