Ersten Wochentag, Format und Übersetzung des Kalenders in Elementor anpassen

Schritt-für-Schritt-Video

Einführung

In diesem Thema werden wir sehen, wie man durch JavaScript-Code das Problem des Kalenders korrigiert, der im Datumsfeld des Form-Widgets von Elementor Pro angezeigt wird.

1. Das erste Problem ergibt sich daraus, dass nordamerikanische Kalender weiterhin den Sonntag als ersten Wochentag verwenden, während europäische Kalender den Montag als ersten Tag betrachten.
2. Das zweite Problem besteht darin, dass in diesem Kalender die Monate und Wochentage auf Englisch sind.
3. Und das dritte Problem ist, dass der Kalender uns bei der Auswahl eines Datums dieses im amerikanischen Datumsformat Y-m-d (Jahr-Monat-Tag) zurückgibt.

Elementor Pro verwendet die JavaScript-Bibliothek Flatpickr, um einen Datepicker zu implementieren, der uns die Auswahl von Daten über einen Kalender erleichtert. Standardmäßig ist diese Bibliothek auf Englisch, legt den Sonntag als ersten Wochentag fest und gibt das Datum im amerikanischen Format zurück.

Was ist ein Datepicker?

Datepicker sind Elemente, die dem Benutzer helfen, ein Datum auf einfache Weise über einen visuellen Kalender auszuwählen.

Was ist Flatpickr?

Flatpickr ist eine Bibliothek zur Erstellung von Datepickern, die nicht von JQuery UI Datepicker abhängt, leichter ist und von Elementor Pro verwendet wird, um die Datumsauswahl in den Datumsfeldern des Form-Widgets zu verbessern.

Lösung

Schauen wir uns an, wie der Code auf unserer Website eingefügt wird.

<script>
   jQuery(document).ready(function($){
     flatpickr.l10ns.default.firstDayOfWeek = 1; // Establecer primer día lunes
		 flatpickr.l10ns.default.weekdays = {
            shorthand: [ 'Dom', 'Lun', 'Mar', 'Mie', 'Jue', 'Vie', 'Sab' ],
            longhand : [ 'Domingo', 'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado']
     };
		 flatpickr.l10ns.default.months = {
            shorthand: [ 'Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dic' ],
            longhand : [ 'Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre' ]
     };
		setTimeout( function(){
			    $('.elementor-date-field').each(function(){flatpickr( $(this)[0] ).set('dateFormat', 'd/m/Y');});
		}, 1000 );
   });
</script>

1. Wählen Sie den obigen Code aus und kopieren Sie ihn.
2. Navigieren Sie im WordPress-Administrationsbereich zu Elementor > Benutzerdefinierter Code.
3. Klicken Sie auf die Schaltfläche Neu hinzufügen.
4. Geben Sie einen Titel ein und fügen Sie den Code in das untenstehende Feld ein, indem Sie STRG+V (Windows) oder CMD+V (Mac) verwenden. Sie können auch mit der rechten Maustaste klicken und Einfügen auswählen.
5. Klicken Sie auf die Schaltfläche Veröffentlichen.
6. Legen Sie im Popup-Fenster die Anzeigebedingungen fest, standardmäßig Gesamte Website.
7. Klicken Sie auf Save & Close.

Jetzt wird der Kalender des Datumsfeldes korrekt angezeigt.