Formatierung des JQuery Datepickers

Question

Ich möchte zur Eingabe von Daten in offene Texteingabe Felder gerne den eingebauten JQuery Datepicker nutzen. Wird mit diesem per Mausklick ein Datum ausgewählt so wird dieses unter Berücksichtigung der aktuell gewählten Sprache formatiert in das Textfeld geschrieben.

Für deutsch ist das beispielsweise "dd.mm.yyyy", für viele andere Sprachen "mm/dd/yyyy". Um Verwechslungen zu vermeiden hat sich unser Projekt auf das Format "dd/mm/yyyy" geeinigt und ich würde dieses Format gerne für alle Sprachversionen des Fragebogens erzwingen.

Über eine Hilfestellung oder Anleitung würde ich mich sehr freuen.

Answer 1

Ich habe inzwischen auf Stackoverflow einen Codeschnipsel gefunden, den ich anpassen konnte um mir das gewünschte Format zu liefern. Mit jQuery.extend() wird das neue Datumsformat übergeben. Das funktioniert in allen Sprachen außer Deutsch, wofür ich keine Erklärung habe. Hier wird noch immer mit Punkt getrennt.

Hier der Code, den ich in einem HTML-Element abgelegt habe:

<script type="text/javascript">
<!--
 
var options = $.extend({ dateFormat: "dd/mm/yy" });
$.datepicker.setDefaults(options);

// -->
</script>

%input:FL03_01%

Comments

Das mit dem extend() ist kein klassisches JavaScript, sondern jQuery - eine Bibliothek, die einige Arbeiten mit JavaScipt vereinfacht, aber nicht unbedingt die Lesbarkeit steigert.

Was hier "erweitert" wird ist das {}. Eine Funktion - oder weil Funktionen und Klassen in JavaScript nicht unterschieden werden - ein leeres Objekt. Und dieses wird einmal um die vorherigen Einstellungen von datepicker ergänzt (das ist der Knackpunkt) und dann nochmal um dateFormat. Das was man damit herausbekommt (in options) legt man dann als Standard-Einstellungen für den datepicker fest. Würde man die bisherigen Einstellungen (also den Mittelteil) weglassen, würde mit dem setDefaults() alles zurückgesetzt.

Wie gesagt: Nicht unbedingt geeignet, um leicht lesbaren Code zu erzeugen...

---

Vielen Dank für die Erklärung.

Leider habe inzwischen festgestellt, dass mit dieser Lösung zwar die gewünschte Formatierung in das Eingabefeld geschrieben wird, beim Absenden der Seite jedoch nach wie vor "mm/dd/yyyy" ausgelesen wird. Versuche ich also einen Tag größer als 12 auszuwählen wird ein Fehler "Your answer is not formatted as expected." ausgegeben.

Zusätzlich kommt der Datensatz durcheinander weil für alle Sprachen außer Deutsch "mm/dd/yyyy" ausgelesen wird, und nur für Deutsch "dd/mm/yyyy".

Dies passiert ebenfalls wenn ich nicht wie oben die Formatierung fixiere, sondern mit folgendem Code eine Lokalisierung vorgebe:

$.datepicker.setDefaults($.extend($.datepicker.regional['en-GB']));

Ich werde jetzt erst einmal einen "regulären Ausdruck" vergeben damit nicht weiter falsche Daten erhoben werden aber es wäre super wenn sich dafür noch eine Lösung finden ließe.

---

Das Problem liegt darin, dass SoSci Survey die Eingabe als Datum einliest und - abhängig von der Fragebogen-Sprache - unterschiedliche Formate interpretiert.

Sie können im Prinzip das Eingabefeld mit regulärem Ausdruck verwenden und (!) dann mit ein paar Zeilen JavaScript den DatePicker an dieses Eingabefeld heften. Etwas anderes macht SoSci Survey auch nicht, wenn Sie den Kalender wählen. Den kompletten JavaScript-Code dafür finden Sie im Quellcode der HTML-Seite, wenn Sie testweise nochmal den Kalender durch SoSci anzeigen lassen.

Answer 2

VIelen Dank für die Hilfe, der Vollständigkeit halber noch meine fertige Lösung:

<script type="text/javascript" src="../plugins/jQuery/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="../plugins/jquery-ui-1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="../plugins/jquery-ui-1.12.1/jquery-ui.min.css">
<link rel="stylesheet" type="text/css" href="../plugins/jquery-ui-1.12.1/jquery-ui.theme.min.css">

<script type="text/javascript">
<!--

$.datepicker.setDefaults($.extend({ dateFormat: "dd/mm/yy" }));
$( function() {
$("#XY01_01").datepicker();
});

// -->
</script>

Bei der Einschränkung "keine Einschränkung" auswählen, nach Bedarf noch einen regulären Ausdruck formulieren.