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:

datepicker_german.js

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>