Elementor Forms Date Picker und Time Picker an deutsches Format anpassen

Hendrik Poddig

Hendrik Poddig

hendrik.poddig@p1commerce.de

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 mit Hilfe 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 type="rocketlazyloadscript">window.addEventListener('DOMContentLoaded', function() {
        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 type="rocketlazyloadscript">window.addEventListener('DOMContentLoaded', function() {
	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 type="rocketlazyloadscript">window.addEventListener('DOMContentLoaded', function() {
	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');