Impostare il primo giorno, il formato e la traduzione del calendario in Elementor

Video passo dopo passo

Introduzione

In questo articolo vedremo come correggere, tramite codice JavaScript, il problema del calendario che viene mostrato nel campo data del widget Form di Elementor Pro.

1. Il primo problema è che i calendari nordamericani continuano a usare la domenica come primo giorno della settimana, mentre i calendari europei considerano il lunedì come primo giorno.
2. Il secondo problema è che in questo calendario i mesi e i giorni della settimana sono in inglese.
3. E il terzo problema è che quando selezioniamo una data nel calendario, ce la restituisce in formato data americano Y-m-d (anno-mese-giorno).

Elementor Pro usa la libreria JavaScript Flatpickr per implementare un datepicker che facilita la selezione delle date tramite un calendario; per impostazione predefinita questa libreria è in inglese, imposta la domenica come primo giorno della settimana e restituisce la data in formato americano.

Cos’è un datepicker?

I datepiker sono elementi che aiutano l’utente a selezionare una data in modo semplice tramite un calendario visivo.

Cos’è Flatpickr?

Flatpickr è una libreria dedicata alla creazione di datepicker che non dipende da JQuery UI Datepicker, è più leggera ed è quella che usa Elementor Pro per migliorare la selezione delle date nei campi di tipo data del widget Form.

Soluzione

Vediamo come inserire il codice nel nostro sito web.

<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. Seleziona e copia il codice qui sopra.
2. Nel pannello di amministrazione di WordPress vai su Elementor > Codice personalizzato.
3. Fai clic sul pulsante Aggiungi nuovo.
4. Scrivi un titolo e incolla il codice nel riquadro qui sotto usando CTRL+V (Windows) o CMD+V (Mac). Puoi anche fare clic con il tasto destro e selezionare Incolla.
5. Fai clic sul pulsante Pubblica.
6. Nella finestra pop-up imposta le condizioni di visualizzazione, per impostazione predefinita Tutto il sito.
7. Fai clic su Save & Close.

Ora il calendario del campo Data verrà mostrato correttamente.