In diesem Beitrag möchte ich euch zeigen, wie man seinen Datepicker mit den richtigen Optionen bzw. der richtigen Option füttert, um das Startdatum korrekt nach seinen Vorstellungen zu setzen. Doch zu allererst, warum das Startdatum verändern? Es gibt Anwendungsfälle, bei denen es Sinn macht, z.B. nur die Tage „ab Heute“ oder „in einer Woche“ als gültige und somit auswählbare Tage im Kalender anzuzeigen. Dazu bietet der JQuery UI Datepicker die Funktion minDate an.

In den Optionsbeschreibung des Datepickers auf der JQuery-UI-Homepage steht zu der minDate-Option folgendes:

Set a minimum selectable date via a Date object, or a number of days from today (e.g. +7) or a string of values and periods (‚y‘ for years, ‚m‘ for months, ‚w‘ for weeks, ‚d‘ for days, e.g. ‚-1y -1m‘), or null for no limit.

Mit der minDate-Option kann also, wie bereits oben beschrieben, das kleinste auswählbare Datum durch ein Datumsobjekt, einer Anzahl an Tagen von Heute ausgehend (z.B. +7) oder mit einem String bestimmt werden. Für die Angabe als String gilt wobei „y“ steht für Jahre, „m“ für Monate, „w“ für Wochen und „d“ für Tage, eine gültige Angabe wäre z.B. „-1y -1m“.

Wie sehen nun die oben genannten Beispiele konkret aus? Der folgende Quellcode-Ausschnitt soll es zeigen:

/* Heute als kleinster auswählbarer Tag*/
$('.selector').datepicker({ 
  minDate: new Date() 
});
/* Heute in einer Woche als kleinster auswählbarer Tag*/
$('.selector').datepicker({ 
  minDate: +7 
});

Die unscheinbare minDate-Funktion bietet somit zahlreiche Einstellungsmöglichkeiten, um den JQuery UI Datepicker so zu gestalten, wie es in den Anforderungen gewünscht ist. Ich wünsche euch jetzt viel Spaß beim Ausprobieren.