Teehaus Otterndorf

Ich bin gerade bei einem aktuellen Projekt auf die Anforderung gestoßen, dass der jQuery UI Datepicker eingesetzt werden soll und in der Auswahl des Datepickers nur bestimmte Tage, Mittwochs und Samstags, ausgewählt werden können.

Der Vorteil, die Tage, die gar nicht gültig im Sinne der Anwendung sind, auszublenden bzw. zu deaktivieren liegt klar auf der Hand: Der Benutzer erkennt sofort welche Tage er auswählen kann und muss sich nicht die richtigen Werte heraus suchen.

Beispiel bei dem nur Mittwoch und Samstag ausgewählt werden kann

Genau für diesen Anwendungsfall bietet der Datepicker schon ein vordefiniertes Event, beforeShowDay. Das nachfolgende Snippet zeigt die Umsetzung des Ausgangsszenario, nur Mittwoch und Samstag anklickbar zu gestalten. 

$("#date").datepicker({
	beforeShowDay: function(date){
		if(date.getDay()==3 || date.getDay()==6){
			return [true,""];
		} else {
			return [false,""];
		}
	}
});

Das Event beforeShowDay ruft für jeden Tag des aktuell anzuzeigenden Monats die Funktion auf, die direkt dem Event zugewiesen wurde. Der Funktion wird der Parameter date übergeben. Der Parameter ist ein Date-Objekt und hat daher die Methode getDay(), die eine Zahl für den jeweiligen Wochentag zurückliefert. Die 0 entspricht Sonntag und die 6 entspricht Samstag. Jetzt muss nur noch überprüft werden, ob der aktuelle Tag ein Mittwoch (3) oder ein Samstag (6) ist. Sobald diese Bedingung zutrifft, wird True zurückgeliefert, andernfalls False. Der Rückgabewert dieser Funktion ist ein Array, daher wird der True/False-Wert in einem Array zurückgegeben.

Dass Benutzer nur bestimmte Tage anklicken können, erhöht in meinen Augen die Benutzerfreundlichkeit. Es ist zwar nicht die große Funktion, aber Benutzerfreundlichkeit kennzeichnet sich oft durch die vielen kleinen, netten Funktionen aus ;) .