JavaScript Datepicker

JavaScript Kalender / Datepicker

Datepicker zum Auswählen eines Datums über eine grafische Oberfläche gibt es viele. Ein paar davon werden hier vorgestellt.

JQuery UI Datepicker

Sehr schick, funktional und leicht anpassbar. 1. Wahl

Yahoo YUI Datepicker

Sehr schöner Datepicker um Datumsbereiche auszuwählen. Siehe auch Gesundheitsregion-rtz.de

Kurzanleitung jQuery:

• auf jQuery.com in die UI Abteilung und dort mit dem Configurator den Datepicker auswählen (Widgets). Es werden automatisch die Benötigten Dateien zusammengestellt.

Im TypoScript die passenden Dateien in den Header laden:

z.B.:

// CSS
page.includeCSS.jqueryui = fileadmin/templates/scripts/jquery-ui/css/smoothness/jquery-ui-1.8.6.custom.css
// JS
page.includeJS.jquery = fileadmin/templates/scripts/jquery-ui/js/jquery-1.4.4.min.js
page.includeJS.jqueryui = fileadmin/templates/scripts/jquery-ui/js/jquery-ui-1.8.6.custom.min.js

Im Formular brauchts noch einen JavaScript Schnipsel, der den Picker den passenden Feldern zuordnet. In folgendem Beispiel muß man nur noch auf das Datumsfeld gehen, dann wird der Kalender eingeblendet. Die IDs der Felder lauten in und out

JavaScript

<script type="text/javascript">
	/*<![CDATA[*/
<!--

			$(function() {
				$.datepicker.setDefaults({
					dateFormat: 'dd.mm.yy',
					numberOfMonths: [1,1],
					yearRange:'-1:+2',
					changeMonth: true,
					changeYear: true,
					regional:['de']
				});

				$("#in").datepicker();
				$("#out").datepicker();
			});
		

// -->
	/*]]>*/
</script>