Der Datepicker aus dem Jquery-UI-Paket ist schon super, aber leider fehlt bei ihm die Möglichkeit zusätzlich eine Uhrzeit auswählen zu können. Für dieses Problem gibt es eine elegante Lösung, die auf bereits vorhandenen Schnittstellen aufbaut und den Jquery-UI-Datepicker erweitert.

Die Erweiterung des UI-Datepickers ist mit Hilfe eines Addons möglich. Zunächst einmal muss natürlich der UI-Datepicker wie gewohnt eingebunden werden. Anschließend braucht ihr lediglich die Source-Datei des Addons in den HEAD-Bereich einbinden, so dass u.a. die nachfolgenden Dateien eingebunden sind.





Layout und Design

Die Umsetzung des Timepickers wurde mit den bereits vorhandenen Bordmitteln aus dem Jquery-UI-Plugin vorgenommen, so dass ihr euch kaum noch um die Anpassung des Designs und Layouts kümmern müsst. Lediglich der nachfolgenden CSS-Code sollte verwendet werden.

/* css for timepicker */
.ui-timepicker-div .ui-widget-header{ margin-bottom: 8px; }
.ui-timepicker-div dl{ text-align: left; }
.ui-timepicker-div dl dt{ height: 25px; }
.ui-timepicker-div dl dd{ margin: -25px 0 10px 65px; }
.ui-timepicker-div td { font-size: 90%; }

Übersetzung

Wie auch beim Datepicker werden beim Timepicker bestimmte sprachspezifischen Begriffe innerhalb des Pickers verwendet. Um diese Sprachelemente einfach an die jeweilige Sprache anzupassen, wurde dies analog zum Datepicker umgesetzt. Ihr könnt also genau wie bei der Übersetzung des Datepickers die Begriffe des Timepickers direkt im Javascript-Source anpassen.

$.timepicker.regional['de'] = {
  timeOnlyTitle: 'Uhrzeit auswählen',
  timeText: 'Zeit',
  hourText: 'Stunde',
  minuteText: 'Minute',
  secondText: 'Sekunde',
  currentText: 'Jetzt',
  closeText: 'Auswählen',
  ampm: false
};
$.timepicker.setDefaults($.timepicker.regional['de']);

Jetzt sollte alles soweit vorbereitet sein, so dass nur noch einem Element der Datetimepicker zugeordnet werden muss. Die Vorgehensweise ist wiederum analog zum Jquery-UI-Datepicker.

  $('#beispiel').datetimepicker();

Habt ihr alle vorhergehenden Schritte korrekt durchgeführt, sollte an dem Element mit der ID #beispiel folgender Datepicker zu sehen sein.

Jquery-UI-datetimepicker

Jquery-UI-datetimepicker

Fazit

Die Erweiterung des bereits bestehenden Jquery-UI-Plugins ist einfach und elegant gelöst. Mit Hilfe des Addons lässt sich leicht ein Datum und eine Uhrzeit auswählen, es passt sich nahtlos an die bereits vorhandenen Layout- und Design-CSS-Klassen an, da der Timepicker lediglich auf das Slider-Widget aus dem Jquery-UI-Plugin zugreift. Daher sollte ihr berücksichtigen, dass auch das Slider-Widget und die dafür notwendigen Komponenten in eurem vielleicht individuell zusammengestellten Jquery-UI-Plugin enthalten ist.