Dans cette rubrique, nous allons voir comment résoudre, par le biais d’un code JavaScript, le problème de l’affichage du calendrier dans le champ date du widget Elementor Pro Form.

1. Le premier problème est que les calendriers nord-américains continuent à utiliser le dimanche comme premier jour de la semaine, alors que les calendriers européens considèrent le lundi comme premier jour.
2. Le deuxième problème est que, dans ce calendrier, les mois et les 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 est renvoyée au format américain Y-m-d (Année-Mois-Jour ).

Elementor Pro utilise la bibliothèque JavaScript Flatpickr pour implémenter un datepicker qui fournit la section date à travers un calendrier, par défaut cette bibliothèque est en anglais, fixe le dimanche comme premier jour de la semaine et renvoie la date au format américain.

Qu’est-ce qu’un sélecteur de date ?

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

Qu’est-ce que Flatpickr ?

Flatpickr est une bibliothèque de datepicker dédiée qui ne dépend pas de JQuery UI Datepicker, est plus légère et est utilisée par Elementor Pro pour améliorer la sélection de la date dans les champs de date du widget Form.

Solution

Voyons comment insérer le code dans notre site web.

1. Cliquez sur le bouton COPY CODE ci-dessus.
2. Dans le panneau d’administration de WordPress, naviguez vers Elementor > Custom code.
3. Cliquez sur le bouton Ajouter un nouveau.
4. Tapez un titre et collez le code dans la case ci-dessous en utilisant CTRL+V (Windows) ou CMD+V (Mac). Vous pouvez également cliquer avec le bouton droit de la souris 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 Tous les sites.
7. Cliquez sur Enregistrer et fermer.

Le calendrier du champ Date s’affiche désormais correctement.