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>
        jQuery( document ).ready( function( $ ){
                    function waitForFlatpicker( callback ) {
                        if ( typeof window.flatpickr !== 'function' ) {
                            setTimeout( function() { waitForFlatpicker( callback ) }, 100 );
                        }
                        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é ",
                        };
                        
        //set translations
                        flatpickr.localize(flatpickr.l10ns.pt);
                        flatpickr('.flatpickr-input');
                        //set format
                        
                    });
        });
        </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>
	jQuery(document).ready(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

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.

				
					function time_format_js() {
       ?>
<script>
	jQuery(document).ready(function () {
		setTimeout( function(){
			
			var picker = flatpickr( jQuery('.elementor-time-field')[0] );
			picker.destroy()

			// Then re invoke with new settings:
			jQuery('.elementor-time-field').flatpickr(
				{
					noCalendar: true,
					enableTime: true,
					allowInput: true,
					dateFormat: "H:i",
					time_24hr: true
				}
			);
	}, 1000 );
});
</script>
<?php
}


add_action('wp_footer', 'time_format_js');
				
			

Kontaktieren Sie uns

Wir helfen Ihnen bei weiteren Problemen und offenen Fragen gerne weiter.

*Pflichtfeld

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

Schreibe einen Kommentar

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

Ihre Anfrage wurde erfolgreich versendet

Wir werden uns schnellstmöglich bei Ihnen melden!