MENU
FERMER

Tutoriel Elementor & Elementor Pro : traduire le sélecteur de date en français, et désactiver la sélection de date antérieure dans un formulaire.

Ce tutoriel détaille chaque étape, de la création du formulaire dans Elementor à la configuration avancée de Flatpickr pour gérer les dates, et inclut une section pour que le calendrier s’affiche en français.

Dans ce tutoriel, je vais vous guider pour configurer un formulaire de contact avec Elementor PRO en ajoutant un champ de sélection de date (Date Picker). Imaginons que vous gériez un formulaire de réservation pour un restaurant ou un hébergement touristique. Dans ce cas, vous souhaitez éviter que les utilisateurs puissent sélectionner des dates passées. En rendant les dates passées inaccessibles, vous garantissez des réservations uniquement pour les jours à venir, ce qui améliore l’expérience utilisateur et prévient les erreurs de réservation.

Ce tutoriel détaille chaque étape, de la création du formulaire dans Elementor à la configuration avancée de Flatpickr pour gérer les dates, et inclut une section pour que le calendrier s’affiche en français.

Pré-requis

  • Avoir Elementor et Elementor PRO installés et activés sur votre site WordPress.
  • Accès à l’éditeur de page avec Elementor PRO pour utiliser le widget Formulaire.

Étape 1 : Créer un formulaire avec Elementor PRO

  1. Ouvrez la page où vous souhaitez ajouter le formulaire avec Elementor.
  2. Dans le panneau Elementor, ajoutez un widget Formulaire.
  3. Dans le formulaire, ajoutez un champ Sélecteur de Date pour permettre à vos utilisateurs de choisir une date.

Note : Elementor utilise Flatpickr pour le champ de sélection de date, ce qui permet des personnalisations avancées.

Étape 2 : Configurer le champ Date Picker pour désactiver les dates passées

Nous allons maintenant faire en sorte que seules les dates actuelles et futures soient sélectionnables dans le champ de date, en utilisant du code JavaScript qui ajuste les paramètres de Flatpickr.

  1. Attribuer un ID au champ Date Picker :
    • Dans les options du champ de date de votre formulaire, définissez un ID unique, par exemple form-field-date.
  2. Ajouter un Widget HTML pour intégrer le code JavaScript :
    • En dessous de votre formulaire, ajoutez un widget HTML dans lequel nous allons coller le code JavaScript.
    • Ce script va forcer Flatpickr à désactiver les dates antérieures à aujourd’hui.
  3. Intégrer le Script JavaScript :
    • Collez le code suivant dans la partie « Code personnalisé » d’Elementor Pro, en veillant à bien utiliser l’ID attribué au champ de date :
<script>
document.addEventListener('DOMContentLoaded', function() {
    setTimeout(function() {
        var datePicker = document.querySelector("#form-field-date");
        if (datePicker) {
            if (datePicker._flatpickr) {
                datePicker._flatpickr.destroy(); // Supprime l'instance actuelle de Flatpickr
            }
            // Réinitialisation de Flatpickr avec la restriction des dates
            flatpickr("#form-field-date", {
                minDate: "today",  // Empêche la sélection des dates antérieures
                dateFormat: "Y-m-d",  // Définit le format de la date au format AAAA-MM-JJ
                locale: {
                    firstDayOfWeek: 1,  // Définit le lundi comme premier jour de la semaine
                    weekdays: {
                        shorthand: ['Dim', 'Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam'],
                        longhand: ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi'],
                    },
                    months: {
                        shorthand: ['Jan', 'Fév', 'Mar', 'Avr', 'Mai', 'Juin', 'Juil', 'Août', 'Sep', 'Oct', 'Nov', 'Déc'],
                        longhand: ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'],
                    }
                }
            });
        }
    }, 500); // Un délai pour laisser le temps au formulaire de charger
});
</script>

Explications du code JavaScript

  • minDate: "today" : Cette option Flatpickr désactive toutes les dates antérieures au jour actuel.
  • dateFormat: "Y-m-d" : Elle garantit que le format de la date est conforme au format attendu par le champ.
  • Paramètres de localisation (locale) : Le champ de date s’affichera en français, avec le lundi comme premier jour de la semaine et les mois/days en français.

Le délai de 500 ms permet de s’assurer que tous les éléments du formulaire sont bien chargés avant que le script ne soit exécuté.

Étape 3 : Tester et Publier

  1. Enregistrez votre travail dans Elementor.
  2. Rechargez la page de votre formulaire et vérifiez que toutes les dates passées sont grisées et que le sélecteur de date est bien en français.
  3. Testez le champ de date pour vous assurer que seules les dates à partir d’aujourd’hui sont sélectionnables.

Si vous n’avez pas Elementor PRO, vous pouvez obtenir un résultat similaire en utilisant Code Snippets pour ajouter du code personnalisé dans WordPress. Voici comment créer un champ de formulaire avec un sélecteur de date, désactiver les dates antérieures et afficher le calendrier en français.

Dans cet exemple, nous allons créer un formulaire de réservation simple pour un restaurant ou un hébergement touristique, en utilisant un formulaire HTML et Flatpickr pour le sélecteur de date.

Étape 1 : Installer et activer Code Snippets

  1. Dans votre tableau de bord WordPress, allez dans Extensions > Ajouter.
  2. Recherchez Code Snippets et installez l’extension.
  3. Activez l’extension.

Code Snippets vous permet d’ajouter du code JavaScript, CSS et PHP sans toucher aux fichiers de votre thème.

Étape 2 : Ajouter le code JavaScript pour le Formulaire

  1. Dans votre tableau de bord WordPress, allez dans Snippets > Add New (ou Ajouter un nouveau snippet en français).
  2. Nommez le snippet, par exemple, Formulaire avec Sélecteur de Date.
  3. Copiez et collez le code suivant dans l’éditeur de Code Snippets. Assurez-vous de sélectionner le type de code HTML pour inclure directement le formulaire et le JavaScript :

<script>
document.addEventListener('DOMContentLoaded', function() {
    setTimeout(function() {
        var datePicker = document.querySelector("#form-field-date");
        if (datePicker) {
            if (datePicker._flatpickr) {
                datePicker._flatpickr.destroy(); // Supprime l'instance actuelle de Flatpickr
            }
            // Réinitialisation de Flatpickr avec la restriction des dates
            flatpickr("#form-field-date", {
                minDate: "today",  // Empêche la sélection des dates antérieures
                dateFormat: "Y-m-d",  // Définit le format de la date au format AAAA-MM-JJ
                locale: {
                    firstDayOfWeek: 1,  // Définit le lundi comme premier jour de la semaine
                    weekdays: {
                        shorthand: ['Dim', 'Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam'],
                        longhand: ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi'],
                    },
                    months: {
                        shorthand: ['Jan', 'Fév', 'Mar', 'Avr', 'Mai', 'Juin', 'Juil', 'Août', 'Sep', 'Oct', 'Nov', 'Déc'],
                        longhand: ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'],
                    }
                }
            });
        }
    }, 500); // Un délai pour laisser le temps au formulaire de charger
});
</script>

Plus de contenus