jQuery Datepicker Plugin

Eigentlich bin ich kein Fan von Datepicker, alleine das ich mich da immer durch klicken muss, macht mich schon krank. Für mein derzeitiges Projekt, ging es leider nicht anders.

Nach kurzer Suche im Google bin ich dann auf den Datepicker von Kelvin Luck gekommen. Ich kenne schon ein anderes Plugin von ihm den jScrollPane – ein JS DIV Scroller. Mir gefällt sein Code, sauber und schnell und verdammt geil zu benutzen.

Heute möchte dir den Datepicker näher bringen, mit einer Datumsüberprüfung die über Ajax funktioniert.

Ziel des Beispiels: Deaktivierung von Tagen

1) Download des JS und CSS Files – lade dir auch die Date Klasse herunter
2) Binde nun die zwei Files in deinem Header ein

Erstelle folgendes Input Feld:

3) gehe nun in dein JS File

Wir bauen uns jetzt schnell mal ein kleines Ajax Event

 $.ajax({
            type: "GET",
            url: 'test.php',
            async: true,
            dataType: 'json',
            success: function(msg) {
                       $.each(msg.blockeddays, function(key,val) {
                           bookingdate[key] = val.date;
                        });
                           $('.date-pick').datePicker({
                            clickInput: enableClickInput,
                            renderCallback:function($td, thisDate, month, year) {
                                if (jQuery.inArray(thisDate.asString(),bookingdate)>0) {
                                    //disabled date
                                    $td.addClass('closed');
                                    $td.addClass('disabled');
                                }
                            }
                        })
            }
});

So jetzt fehlt nur noch das PHP File – test.php:

$days['blockeddays'][] = '14.04.2010';
$days['blockeddays'][] = '15.04.2010';
$days['blockeddays'][] = '16.04.2010';
echo json_encode($days);

Das war es schon, was machen wir hier jetzt? wir kontrollieren das Datum das gesperrt werden soll und setzen die Class disabled und closed.

Fertig – viel Spass!