elementor forms deutsches datumsformat p1 commerce

Elementor Forms Date Picker und Time Picker an deutsches Format anpassen

hendrik poddig
Hendrik Poddig
info@p1commerce.de

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.

Inhaltsverzeichnis

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
dNumerisch mit führenden Nullen01–31
jNumerisch, ohne führende Nullen1–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 Wochen­tage

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.

11 Antworten

    1. 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.

  1. 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

  2. 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!

    1. 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

  3. 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

  4. 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

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert