Home > HTML, JavaScript > Jquery: Datepicker mit deutschen Wochentagen

Jquery: Datepicker mit deutschen Wochentagen

Bei Buchungsformularen, besonders im Tourismus Bereich oder zum Beispiel auf Flug Portalen, ist die schnelle Datumauswahl besonders wichtig. Der Nutzer soll das Datum möglichst bequem auswählen können, ohne selbst lange Eingaben im richtigen Format wie „tt.mm.jjjj“ oder „tt-mm-jjjj“ zu tätigen.

Das Datepicker JQuery Plugin eignet sich hervorragend dafür um die Datum Auswahl zu beschleunigen. Es ist sehr gut konfigurierbar und bietet viele Einstellungen zum Anpassen an die eigenen Bedürfnisse. Per Default wird der Datepicker in englischer Sprache ausgeführt. Die deuten Wochentage muss man mit der entsprechenden Option entweder im Konstruktur oder nachträglich mit einem Setter nach der Initialisierung verändern.

Das folgende Beispiel zeigt wie man den Datepicker in die deutsche Sprache anpassen kann:

Im HTML Body der Webseite haben wir dann folgendes Input Feld angelegt:

Mit der Option dayNames werden die deutschen Namen der Wochentage in voller Länge angezeigt, wenn man über den Kurznamen im Tabellenkopf drüberfährt (hover). Der Tag beginnt mit dem Sonntag, entsprechend beginnt auch hier das Array mit den deutschen Bezeichnungen mit dem Sonntag.

Mit der Option dayNamesMin kann man die Bezeichnungen im Tabellenkopf definieren. Diese sind in unserem Beispiel immer sichbar, genau wie die Namen der einzelnen Monate, welche mit der Option monthNames verändert werden können.

Um die Anpassung auf Deutsch komplett zu machen können noch die Beschriftungen closeText und der currentText verändert werden. Der closeText ist der Text des Buttons zur Auswahl des aktuellen Tages. Der closeText ist die Beschriftung für den Button zum Schließen des Datepicker Popup Fensters. Mit firstDay wird der erste Tag der Woche ausgewählt, in diesem Fall der Montag (firstDay: 1). Mit dateFormat legt man wie der Name schon sagt das Format des Datums fest, das man dann im Inputfeld sieht.

  1. Stefan
    25. Dezember 2013, 23:21 | #1

    Hallo,

    danke für die hilfreichen Tipps. Das ist genau was ich benötige. Mein Problem ist aber wie mache ich das mit zwei Datumsfelder. Anreisedatum Abreisedatum

    • Peter
      26. Dezember 2013, 12:20 | #2

      Genauso wie mit einem Feld. Zum Beispiel als Selector statt „#date“ jetzt „#date_anreise, #date_abreise“ nutzen und entsprechend zwei Input-Felder mit den ids anlegen.

  2. Robert
    2. Oktober 2014, 07:42 | #3

    Hallo,

    ich habe folgendes Problem bei einer WP Seite mit Reservierungskalender (jquery datepicker). Ich habe schon die Umbenennung vorgenommen, leider zeigt es mir noch immer die Monate auf englisch an. Wie und wo muß ich noch was einstellen damit die Monate auf deutsch angezeigt werden. Für Tipps wäre ich dankbar.

  1. Bisher keine Trackbacks