Anpassung an das deutsche Format
Vielen von euch, die Elementor und das Elementor Formular Widget nutzen, wird schon aufgefallen sein, dass die Formatierung des Datums- und Zeitfeldes in den mit Elementor erstellten Kontaktformularen nicht ganz passt. Ebenso sind die Auswahlwerkzeuge weder an das deutsche Format, noch an die deutsche Sprache angepasst.
In diesem Tutorial zeigen wir euch, wie man das ganze durch einfaches Einfügen eines Codes mithilfe des Plugins Code Snippets löst.
Datumsübersetzung
Als Erstes fällt direkt auf, dass die Labels in der Datumsauswahl auf Englisch angezeigt werden. Sowohl die Monate, als auch die Wochentage sind noch nicht übersetzt.
Fügt einfach den folgenden Code in die funtions.php ein, oder wenn Ihr das Plugin „Code Snippets“ benutzt, erstellt ein Snippet und fügt es dort ein.
add_action('wp_footer', function () {
?>
<script>
function waitForFlatpicker(callback) {
if (typeof window.flatpickr !== 'function') {
setTimeout(function () {
waitForFlatpicker(callback);
}, 100);
} else {
callback();
}
}
waitForFlatpicker(function () {
flatpickr.l10ns.pt = {
weekdays: {
shorthand: ["So", "Mo", "Di", "Mi", "Do", "Fr", "Sa"],
longhand: [
"Sonntag",
"Montag",
"Dienstag",
"Mittwoch",
"Donnerstag",
"Freitag",
"Samstag",
],
},
months: {
shorthand: [
"Jan",
"Feb",
"Mar",
"Apr",
"Mai",
"Jun",
"Jul",
"Aug",
"Sep",
"Okt",
"Nov",
"Dez",
],
longhand: [
"Januar",
"Februar",
"März",
"April",
"Mai",
"Juni",
"Juli",
"August",
"September",
"Oktober",
"November",
"Dezember",
],
},
rangeSeparator: " até ",
};
flatpickr.localize(flatpickr.l10ns.pt);
flatpickr('.flatpickr-input');
});
</script>
<?php
});
Wenn ihr an den Monats- und Tagesnamen noch etwas verändern möchtet, dann tut dies einfach an der jeweiligen Stelle zwischen den Anführungszeichen.
Datumsformat
Wenn man ein Datum ausgewählt hat, wird dieses im entsprechenden Feld standardmäßig in folgendem Format angezeigt „yyyy-mm-dd“ –
wir zeigen euch wie ihr es einfach in „l, d.m.Y“ (z.B. „Dienstag, 11.05.2021“) ändert.
Fügt folgenden Code in die funtions.php ein, oder wenn Ihr das Plugin „Code Snippets“ benutzt, erstellt ein Snippet und fügt es dort ein.
add_action('wp_footer', function () {
?>
<script>window.addEventListener('DOMContentLoaded', function() {
waitForFlatpicker(function () {
setTimeout(function () {
jQuery('.elementor-date-field').each(function () {
flatpickr(jQuery(this)[0]).set('dateFormat', 'l, d.m.Y');
});
jQuery('.elementor-date-field').removeAttr('pattern');
}, 1000);
});
});</script>
<?php
});
Falls ihr ein anderes Format benötigt, müsst ihr es einfach am Ende von Zeile 6 ersetzen.
Hier seht ihr die Legende mit den verfügbaren Variablen:
| Monatstag | ||
|---|---|---|
d | Numerisch mit führenden Nullen | 01–31 |
j | Numerisch, ohne führende Nullen | 1–31 |
S | Das englische Suffix für den Tag des Monats | st, nd or th in the 1st, 2nd or 15th. |
Wochentag | ||
l | Vollständiger Name (Kleinbuchstabe „L“) | Sonntag – Samstag |
D | Name aus drei Buchstaben | Mo. – So. |
| Monat | ||
m | Numerisch mit führenden Nullen | 01–12 |
n | Numerisch, ohne führende Nullen | 1–12 |
F | Text voll | Januar – Dezember |
M | Text drei Buchstaben | Jan – Dez. |
| Jahr | ||
Y | Numerisch, 4-stellig | z. B. 1999, 2003 |
y | Numerisch, 2-stellig | z. B. 99, 03 |
Reihenfolge der Wochentage
Ein Punkt, den auch ich lange übersehen habe, ist die Reihenfolge der Wochentage. Im Standard-Format des Flatpickers beginnt die Woche nämlich mit dem Sonntag und nicht mit dem Montag.
Um euren Kalender mit dem Montag beginnen zu lassen, könnt ihr nun einfach den folgenden Code hinzufügen:
add_action('wp_footer', function () {
?>
<script>
waitForFlatpicker(function () {
flatpickr.l10ns.pt = {
firstDayOfWeek: 1,
};
flatpickr.localize(flatpickr.l10ns.pt);
flatpickr('.flatpickr-input');
});
</script>
<?php
});
Zeitformat
Auch das Zeitformat ist standardmäßig auf das AM & PM Format eingestellt. Dieses müssen wir jetzt noch auf das 24h Format umstellen.
Fügt folgenden Code in die funtions.php ein, oder wenn ihr das Plugin „Code Snippets“ benutzt, erstellt ein Snippet und fügt es dort ein.
add_action('wp_footer', function () {
?>
<script>window.addEventListener('DOMContentLoaded', function() {
waitForFlatpicker(function () {
setTimeout(function () {
var picker = flatpickr(jQuery('.elementor-time-field')[0]);
picker.destroy();
jQuery('.elementor-time-field').flatpickr({
noCalendar: true,
enableTime: true,
allowInput: true,
dateFormat: "H:i",
time_24hr: true
});
}, 1000);
});
});</script>
<?php
});
Hinweis:
Wir haben unseren Code angepasst. Bitte beachte, dass wir keine Garantien für die Funktionalität des Codes geben können. Falls Probleme mit dem Code auftreten sollten, zögere nicht, uns in den Kommentaren zu informieren. Wir werden unser Bestes tun, um dir bei der Lösung des Problems zu helfen.
16 Antworten
FYI: Funktioniert nicht (mehr?)
Hallo Felix,
doch, eigentlich funktioniert das Snippet noch, jedoch fügt unser Caching Plugin immer etwas in die Code Schnipsel hinzu, was den Code nicht mehr funktionieren lässt. Du musst in script klammern einfach nur das „type=“rocketlazyloadscript““ entfernen, dann sollte es funktionieren. Falls nicht, sag nochmal Bescheid. Vielen Dank für deinen Hinweis.
Danke für das Script, funktioniert noch immer mit Elementor Version 3.8.0 und Pro 3.8.0
Hallo Hendrik,
heute gab es ein Elementor update und nun kommen nur noch Fehlermeldungen beim Seite laden. Kannst du dich der Sache mal annehmen und vielleicht eine Lösung posten?
Dank und Lg
Hallo Hendirk, vielen Dank für die ausführliche Beschreibung und das Script!
Hast du vielleicht auch eine Lösung für die Änderung Reihenfolge der Wochentage? Im deutschen beginnt die Woche ja üblicherweise am Montag.
Liebe Grüße!
Hallo Anni, ich habe den Blogartikel nun um das Snippet erweitert, du findest dieses unter der Überschrift: Reihenfolge der Wochentage
Vielen, vielen Dank!! Das funktioniert ganz wunderbar!
Die Umstellung des Zeitformates in 24h funktioniert bei mir leider nicht.
Hat noch jemand das Problem?
Liebe Grüße
Hallo Jan,
wenn du möchtest kannst du mir einmal den Link zur der Seite nenne wo du es eingebaut hast, dann schau ich mir das einmal an.
LG Hendrik
Hi Hendrik und hallo Jan,
vielen Dank für das Script. Hat mich sehr gefreut, es zu finden!
Funktioniert bei mir auf Ele 3.17 leider auch nicht (1. Tag, 24h). Öfftl Link habe ich noch nicht, da Dev-Site.
grüße
Ingo
Fantastisch. Funktioniert wie geschmiert. Vielen Dank! Du hast nicht zufälligerweise ein Beispiel wie man Wochentage deaktiviert (Samstag und Sonntag). Danke nochmal und viele Grüße Pierre
Dem würde ich mich anschließen 🙂
Ich hab zwar schon mehrere Dinge probiert aber bisher nichts gefunden, dass tatsächlich funktioniert. Leider…
Hallo ihr beiden,
nein habe ich leider nicht, tut mir leid.
Vielen Dank auch von meiner Seite!
Hat mir wirklich sehr weitergeholfen und funktioniert wirklich super.
In der mobilen Ansicht, werden bei mir jedoch bei der Uhrzeit noch 4-Stellen angezeigt. Hier hätte ich auch gerne nur zwei Stellen.
Gibt es zufällig einen Tipp, was ich hier ändern muss oder falsch mache.
Komm einfach nicht drauf.
Würde mich sehr freuen!
Hallo Katrin,
kannst du mir einmal ein Bild machen und das per E-Mail an die info@p1commerce.de schicken. Das kann aber manchmal am Endgerät bzw. Browser liegen.
LG
Ganz herzlichen Dank, sämtliche Scripte funktionieren einwandfrei! Und danke fürs kostenlose einstellen bzw. veröffentlichen!
Gruß, Holger