Um die Funktionen von „jQuery user Interface“ (kurz: jQuery UI) nutzen zu können muss zusätzlich zur jQuery Bibliothek die UI und das zugehörige Style-Sheet in die Webseite eingebunden werden:
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
Standardmässig ist der Datepicker nur in englischer Sprache verfügbar. Um die Texte in deutsch darzustellen kann der Datepicker durch folgendes JavaScript ergänzt werden:
jQuery(function($){ $.datepicker.regional['de'] = {clearText: 'löschen', clearStatus: 'aktuelles Datum löschen', closeText: 'schließen', closeStatus: 'ohne Änderungen schließen', prevText: '<zurück', prevStatus: 'letzten Monat zeigen', nextText: 'Vor>', nextStatus: 'nächsten Monat zeigen', currentText: 'heute', currentStatus: '', monthNames: ['Januar','Februar','März','April','Mai','Juni', 'Juli','August','September','Oktober','November','Dezember'], monthNamesShort: ['Jan','Feb','Mär','Apr','Mai','Jun', 'Jul','Aug','Sep','Okt','Nov','Dez'], monthStatus: 'anderen Monat anzeigen', yearStatus: 'anderes Jahr anzeigen', weekHeader: 'Wo', weekStatus: 'Woche des Monats', dayNames: ['Sonntag','Montag','Dienstag','Mittwoch','Donnerstag','Freitag','Samstag'], dayNamesShort: ['So','Mo','Di','Mi','Do','Fr','Sa'], dayNamesMin: ['So','Mo','Di','Mi','Do','Fr','Sa'], dayStatus: 'Setze DD als ersten Wochentag', dateStatus: 'Wähle D, M d', dateFormat: 'dd.mm.yy', firstDay: 1, initStatus: 'Wähle ein Datum', isRTL: false}; $.datepicker.setDefaults($.datepicker.regional['de']); });
Diese JavaScript-Datei wird zusätzlich im head-Bereich der HTML-Datei eingebunden:
<script src="/js/datepicker_german.js" type="text/javascript"></script>
Nun wird das HTML-Element mit der Funktion „datepicker“ verbunden:
<script language="javascript" type="text/javascript"> $( function() { $( "#Datum" ).datepicker(); } ); </script>
Abschliessend muss nur noch das HTML-Formular-Element, welches in diesem Beispiel die ID „Datum“ besitzen muss, im HTML-Body erstellt werden:
<table id="neue_Buchung"> <tr> <td align="right"><label for="Datum">Datum:</label></td> <td><input type="text" name="Datum" id="Datum" value="02.10.2018" /></td> </tr> </table>