Ajuster le premier jour, le format et la traduction du calendrier dans Elementor

Vidéo pas à pas

Introduction

Dans ce sujet, nous allons voir comment corriger, via du code JavaScript, le problème du calendrier affiché dans le champ date du widget Form d’Elementor Pro.

1. Le premier problème vient du fait que les calendriers nord-américains continuent d’utiliser le dimanche comme premier jour de la semaine, tandis que les calendriers européens considèrent le lundi comme le premier jour.
2. Le deuxième problème est que dans ce calendrier, les mois et jours de la semaine sont en anglais.
3. Et le troisième problème est que lorsque nous sélectionnons une date dans le calendrier, elle nous est renvoyée au format de date américain Y-m-d (Année-mois-jour).

Elementor Pro utilise la bibliothèque JavaScript Flatpickr pour implémenter un datepicker qui facilite la sélection de dates via un calendrier. Par défaut, cette bibliothèque est en anglais, définit le dimanche comme premier jour de la semaine et renvoie la date au format américain.

Qu’est-ce qu’un datepicker ?

Les datepickers sont des éléments qui aident l’utilisateur à sélectionner une date de manière simple via un calendrier visuel.

Qu’est-ce que Flatpickr ?

Flatpickr est une bibliothèque dédiée à la création de datepickers qui ne dépend pas de JQuery UI Datepicker. Elle est plus légère et c’est celle qu’utilise Elementor Pro pour améliorer la sélection de dates dans les champs de type date du widget Form.

Solution

Voyons comment insérer le code dans notre site 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. Sélectionnez et copiez le code ci-dessus.
2. Dans le panneau d’administration de WordPress, naviguez vers Elementor > Code personnalisé.
3. Cliquez sur le bouton Ajouter nouveau.
4. Saisissez un titre et collez le code dans la zone ci-dessous en utilisant CTRL+V (Windows) ou CMD+V (Mac). Vous pouvez également faire un clic droit et sélectionner Coller.
5. Cliquez sur le bouton Publier.
6. Dans la fenêtre contextuelle, définissez les conditions d’affichage, par défaut Tout le site.
7. Cliquez sur Save & Close.

Désormais, le calendrier du champ Date s’affichera correctement.