Le module Formulaire de Divi s’enrichit peu à peu au fil des mises à jour du builder.
Néanmoins, quelques fonctionnalités lui font encore défaut pour être vraiment complet.
L’une d’elles est la possibilité d’avoir un champ avec sélecteur de date.
Voyons donc comment ajouter cette option.

Pré-requis

C’est mieux avec un thème enfant…

Avant de commencer, veuillez noter qu’il est préférable d’utiliser un thème enfant pour réaliser ce tutoriel, et ce afin de charger les fichiers JavaScript nécessaires de la manière la plus adéquate possible.

Si vous n’avez pas de thème enfant, vous pouvez télécharger gratuitement le thème enfant de Divi Community.
Et si vous voulez en savoir plus sur les thèmes enfants, je vous invite à lire notre article Tout savoir sur les thèmes enfants pour Divi.

Utilisons un plugin jQuery

Je vous propose d’utiliser le plugin jQuery gratuit nommé Date Range Picker qui permet de générer facilement un sélecteur de date proposant de nombreuses options.
Si vous faites quelques recherches sur le sujet, vous constaterez qu’il existe de nombreux autres plugins jQuery permettant d’ajouter un sélecteur de date à un formulaire. Libre à vous d’en tester d’autres.
Personnellement, après avoir étudié plusieurs solutions, si je me suis arrêté sur Date Range Picker, c’est parce qu’il est totalement gratuit, maintenu régulièrement à jour, qu’il offre un grand nombre de fonctionnalités et qu’il est très facile à installer.

Appelez les fichiers nécessaires à Date Range Picker

Date Range Picker est composé de 2 fichiers JavaScript et d’un fichier CSS.
Mais nul besoin d’héberger ces fichiers sur votre serveur car ceux-ci sont disponibles via le CDN JSdelivr.
Ceci évite une manip (télécharger et héberger les fichiers) et est bénéfique au temps de chargement de la ou des pages où le plugin sera utilisé.

Ouvrez le fichier functions.php de votre thème enfant et ajoutez les lignes suivantes.
Selon vos besoins, vous pourrez les modifier en suivant les indications que je vous donne plus bas.

Détaillons ce code

• Ligne 3 : vous pouvez nommer la fonction comme bon vous semble ; pensez juste à utiliser le même nom à la ligne 10
• Ligne 4 : j’ai mis une condition pour ne charger le plugin et son fichier de config que sur la page de mon choix : ici la page “contact”
  • Si vous pensez utiliser votre formulaire avec sélecteur de date sur la majorité des pages de votre site, supprimez les lignes 4 et 8
  • Si vous voulez charger le plugin sur plusieurs pages bien précises, il vous suffit de préciser leur nom (le slug) entre guillemets et séparés par des virgules : ‘page-truc’, ‘page-bidule’. Vous pouvez aussi utiliser leurs IDs : ’29’, ’80’
• Ligne 5 : on appelle la bibliothèque JavaScript moment.js qui est utilisée par Date Range Picker
• Ligne 6 : on appelle le fichier JavaScript de Date Range Picker
• Ligne 7 : on appelle la feuille de styles de Date Range Picker
• Ligne 10 : on ajoute l’action permettant d’appeler ces fichiers au chargement de la page

Si vous lisez le contenu de la section “Getting Started” du site de Date Range Picker, vous verrez qu’ils incluent aussi jQuery.
Mais dans notre cas, jQuery étant automatiquement chargé avec WordPress, il n’est évidemment pas nécessaire de l’appeler une seconde fois (ce serait source de problèmes).

Préparez votre formulaire pour accueillir un sélecteur de date unique

Construisez le formulaire contenant les champs correspondant à vos besoins et stylez-le comme vous le souhaitez.

Pour le sélecteur de date, il vous suffit d’ajouter un simple champ texte.
Dans Contenu -> Texte -> ID du champ, donnez un identifiant à votre champ. Celui-ci nous permettra de cibler ce champ pour lui attribuer le sélecteur de date lors de la configuration de Date Range Picker.

Dans mon exemple, notez que j’ai préfixé mon identifiant en précisant dc afin d’éviter tout conflit, dans le sens où le terme date, très générique, pourrait déjà être utilisé par un autre élément.

Configurez Date Range Picker pour un sélecteur de date unique

Avant tout, sachez que sur le site de Date Range Picker, section “Configuration Generator“, vous trouverez… un configurateur ! 🙂
Je vous conseille donc de vous amuser avec celui-ci afin de comprendre comment fonctionnent les diverses options de Date Range Picker.

Ci-dessous, je retranscris puis détaille la configuration que j’ai utilisée dans mon premier exemple et qui vous permettra d’obtenir un sélecteur de date unique, assez basique donc sans options particulières.

Vous pouvez simplement insérer ces lignes dans un module code sur la page où se trouve votre formulaire.

Détaillons ce code

• Ligne 4 : on appelle l’identifiant de notre champ texte pour lui assigner Date Range Picker.
  Notez que bien qu’on ait attribué l’identifiant dc_date à notre champ texte, le builder le modifie pour l’englober dans un identifiant plus complet et spécifique au module Formulaire de Divi : #et_pb_contact_dc_date_0
  • et_pb_contact car il s’agit du module Formulaire
  • dc_date : nous retrouvons notre identifiant personnalisé
  • 0 car il s’agit du premier formulaire de la page. Ce serait donc 1 pour le deuxième, 2 pour le troisième, etc.
• Ligne 5 : on précise qu’on souhaite un sélecteur de date unique (et non une plage de dates comme le plugin est configuré par défaut)
• Ligne 6 : on commence les réglages de localisation (traduction)
  • Ligne 7 : on rétablit le format de date à la française
  • Lignes 9 à 15 : on traduit les noms des jours de la semaine
  • Lignes 18 à 29 : on traduit les noms des mois
  • Ligne 31 : on précise que la semaine commence par le lundi
• Ligne 33 : on positionne le sélecteur pour qu’il s’ouvre à droite de la petite flèche

Les options de Date Range Picker

Afin de vous aider à mieux comprendre les diverses options de Date Range Picker (car elles ne sont pas toutes disponibles dans leur configurateur), je vous les ai traduites ci-dessous.

• startDate : (Date ou chaîne) Date de début de la plage de dates initialement sélectionnée. Si vous utilisez une chaîne, celle-ci doit correspondre à la chaîne de format de date définie dans vos paramètres locale.
• endDate : (Date ou chaîne) Date de fin de la plage de dates initialement sélectionnée.
• minDate : (Date ou chaîne) Date la plus ancienne qu’un utilisateur peut sélectionner.
• maxDate : (Date ou chaîne) La dernière date qu’un utilisateur peut sélectionner.
• maxSpan : (objet) Le nombre de jours maximum entre les dates de début et de fin qui ont été sélectionnées. Cochez maxSpan dans le configurateur pour voir un exemple d’utilisation. Vous pouvez utiliser n’importe quel objet que la bibliothèque moment.js permet d’ajouter à une date.
• showDropdowns : (true/false) Affiche des listes déroulantes au-dessus des calendriers qui permettent de passer plus facilement à un mois et une année spécifiques.
• minYear : (nombre) Année minimale indiquée dans les listes déroulantes lorsque showDropdowns est défini sur true.
• maxYear : (nombre) Année maximale indiquée dans les listes déroulantes lorsque showDropdowns est défini sur true.
• showWeekNumbers : (true/false) Affiche sur les calendriers les numéros de semaine au début de chaque semaine.
• showISOWeekNumbers : (true/false) Affiche sur les calendriers les numéros de semaine ISO au début de chaque semaine.
• timePicker : (true/false) Ajoute des listes déroulantes pour choisir des horaires en plus des dates.
• timePickerIncrement : (nombre) Incrément de la liste de sélection des minutes (par exemple, préciser 30 n’autorisera que la sélection des heures se terminant par 0 ou 30).
• timePicker24Hour : Utilisez des heures sur 24 heures au lieu de 12 heures, en supprimant la sélection AM / PM.
• timePickerSeconds : (true/false) Affiche les secondes dans le sélecteur d’horaires.
• ranges : (objet) Définissez des plages de dates prédéfinies parmi lesquelles l’utilisateur peut faire son choix. Chaque clé est l’intitulé de la plage et sa valeur un tableau contenant deux dates qui représentent les limites de la plage. Cliquez sur ranges dans le générateur de configuration pour voir des exemples.
• showCustomRangeLabel : (true/false) Affiche la possibilité de choisir une plage personnalisée à la fin de la liste des plages prédéfinies, lorsque l’option ranges est utilisée. Cette option sera mise en surbrillance lorsque la sélection de la plage de dates ne correspond à aucune des plages prédéfinies. Cliquez dessus pour afficher les calendriers et sélectionner une nouvelle plage.
  Par défaut, l’intitulé de la plage personnalisée est “Custom”. Vous pouvez traduire ce terme en modifiant l’option customRangeLabel située dans locale.
• alwaysShowCalendars : (true/false) Normalement, si vous utilisez l’option ranges pour spécifier des plages de dates prédéfinies, les calendriers permettant de choisir une plage de dates personnalisée ne sont pas affichés tant que l’utilisateur n’a pas cliqué sur la plage personnalisée. Lorsque cette option est définie sur true, les calendriers permettant de choisir une plage de dates personnalisée sont toujours affichés.
• opens : (“left”/”right”/”center”) Indique si le sélecteur apparaît aligné à gauche, à droite ou au centre sous l’élément HTML auquel il est attaché.
• drops : (“down”/”up”) Indique si le sélecteur apparaît au-dessous (valeur par défaut) ou au-dessus de l’élément HTML auquel il est attaché.
• buttonClasses : (chaîne) Noms des classes CSS qui seront ajoutées aux boutons de validation et d’annulation.
• applyButtonClasses : (chaîne) Noms des classes CSS qui seront ajoutées uniquement au bouton de validation.
• cancelButtonClasses : (string) Noms des classes CSS qui seront ajoutées uniquement au bouton d’annulation.
• locale : (objet) Vous permet d’ajouter des chaînes traduites pour les boutons et les intitulés, de personnaliser le format de date et de changer le premier jour de la semaine pour les calendriers. Cochez le paramètre locale dans le générateur de configuration pour savoir comment personnaliser ces options.
• singleDatePicker : (true/false) N’affichez qu’un seul calendrier pour choisir une date, au lieu d’un sélecteur de plage avec deux calendriers. Les dates de début et de fin fournies dans votre callback seront identiques.
• autoApply : (true/false) Masque les boutons de validation et d’annulation et applique automatiquement une nouvelle plage de dates dès que l’utilisateur clique sur deux dates.
• linkedCalendars : (true/false) Lorsque cette option est activée, les deux calendriers affichés le seront toujours pour deux mois séquentiels (par exemple janvier et février, mars et avril). Ces deux mois changeront simultanément en cliquant sur les flèches gauche ou droite au-dessus des calendriers. Lorsque cette option est désactivée, les deux calendriers peuvent être avancés individuellement et afficher n’importe quel mois ou année.
• isInvalidDate : (fonction) Une fonction qui est passée à chaque date dans les deux calendriers avant qu’ils ne soient affichés et qui peut renvoyer true ou false pour indiquer si cette date doit ou non être disponible pour la sélection.
• isCustomDate : (fonction) Une fonction qui est passée à chaque date dans les deux calendriers avant qu’ils ne soient affichés et qui peut renvoyer une chaîne ou un tableau de noms de classes CSS à appliquer à la cellule du calendrier contenant cette date.
• autoUpdateInput : (true/false) Indique si le sélecteur de plage de dates doit mettre à jour automatiquement la valeur de l’élément <input> auquel il est attaché lors de l’initialisation et lorsque les dates sélectionnées changent.
• parentEl : (chaîne) Sélecteur jQuery de l’élément parent auquel le sélecteur de plage de dates sera ajouté ; si rien n’est précisé, il s’agira du body

Préparez votre formulaire pour accueillir un sélecteur de plage de dates

La préparation de votre formulaire est sensiblement la même que pour le sélecteur de date unique.
Vous remarquerez que j’ai modifié ici l’identifiant par dc_plage.

Créez un placeholder en ajoutant dans Contenu -> Texte -> Titre, le texte qui s’affichera tant que le champ n’aura pas reçu une valeur (une date en l’occurence).
Dans mon exemple, j’ai simplement précisé “Choisissez une plage de dates”.

Configurez Date Range Picker pour un sélecteur de plage de dates

Voyons maintenant comment aller bien plus loin avec Date Range Picker en utilisant un maximum de ses fonctionnalités.

Voici les principales options que j’ai ajoutées à mon second exemple :

• Plages de dates prédéfinies
• Listes déroulantes pour le choix du mois et de l’année
• Affichage des numéros de semaines
• Sélecteur d’horaires

Ci-dessous la configuration correspondant à ce second exemple.

• Ligne 4 : on appelle l’identifiant de notre champ texte pour lui attribuer Date Range Picker.
  Mon identifiant personnalisé dc_plage est ici également précédé de #et_pb_contact mais est suivi du chiffre 1 car il s’agit du second formulaire présent sur ma page.
• Ligne 5 : on précise que l’on ne souhaite pas que la date du jour soit déjà affichée dans le champ au chargement de la page ; ce qui nous permet de voir notre placeholder
• Ligne 6 : on affiche les listes déroulantes pour sélectionner les mois et années
• Ligne 7 : on affiche le sélecteur d’horaires
• Ligne 8 : on règle le sélecteur d’horaires sur 24h
• Ligne 9 : on affiche les numéros de semaines
• Lignes 11 à 16 : on précise les plages de dates prédéfinies
• Ligne 19 : on précise l’intitulé du bouton de validation
• Ligne 20 : on précise l’intitulé du bouton d’annulation
• Ligne 21 : on précise l’intitulé du terme précédant la première date
• Ligne 22 : on précise l’intitulé du terme liant les 2 dates
• Ligne 23 : on précise l’intitulé définissant la plage personnalisée
• Ligne 24 : on définit l’abréviation pour le terme “semaine”
• Lignes 26 à 32 : on traduit les noms des jours de la semaine
• Lignes 35 à 46 : on traduit les noms des mois
• Ligne 48 : on précise que la semaine commence par le lundi
• Ligne 50 : on positionne le sélecteur pour qu’il s’ouvre centré avec la petite flèche
• Ligne 51 : on attribue une classe CSS commune pour les boutons
• Ligne 52 : on attribue une classe CSS pour le bouton de validation
• Ligne 53 : on attribue une classe CSS pour le bouton d’annulation
• Ligne 60 : on créé une fonction qui se déclenche lors de la validation de la date (c’est-à-dire après avoir cliqué sur le bouton “valider”).
  Pour plus d’infos, vous reporter à la liste des événements de Date Range Picker.
  Enfin, il faut à nouveau préciser l’identifiant du champ accueillant le sélecteur de date
• Ligne 61 :
  • on précise le format de la date et de l’horaire de début
  • on définit le séparateur qui s’affiche entre les 2 dates
  • on précise le format de la date et de l’horaire de fin
• Ligne 64 : on créé une fonction qui se déclenche lors de l’annulation (c’est-à-dire après avoir cliqué sur le bouton “Annuler”).
  Il faut à nouveau préciser l’identifiant du champ accueillant le sélecteur de date
• Ligne 65 : la valeur de cette fonction est vide car le but est de réinitialiser le champ

Stylez Date Range Picker

Le design par défaut de Date Range Picker est acceptable. Néanmoins, il est toujours préférable de l’adapter à la charte graphique du site sur lequel il est utilisé.

Pour mes exemples, j’ai juste changé les couleurs des dates et modifié les boutons pour les faire correspondre au style de ceux de Divi.
Vous pourrez constater dans les lignes de CSS ci-dessous que la plus grande partie des règles nécessaires concerne les boutons.

Souvenez-vous, lors de la configuration du second exemple, nous avons attribué des classes personnalisées aux boutons :

• Tout d’abord la classe et_pb_button qui est la classe générale définissant les boutons de Divi. Elle apportera la majorité des propriétés CSS nécessaires
• Et ensuite pour affiner, une classe spécifique pour le bouton de validation et une autre pour le bouton d’annulation

Lignes 35 et 37, j’appelle des éléments de la police d’icones d’Elegant Themes.
Pour savoir comment vous en servir, vous pouvez lire mon tutoriel Comment remplacer les puces des listes par des icones dans Divi dans lequel je détaille leur utilisation.

En conclusion

Vous venez de voir qu’il est relativement aisé d’ajouter une fonctionnalité au module Formulaire de Divi en utilisant un plugin jQuery pour implémenter un sélecteur de date.

Que vous ayez besoin d’un sélecteur de date unique ou de plage de dates, Date Range Picker est adéquat. Ses nombreuses options permettent d’améliorer un formulaire simple ou une version plus complexe pour faire du booking par exemple.

Une fois encore, pour bien comprendre comment fonctionne Date Range Picker et prendre en main ses fonctionnalités, je vous invite à consulter sa documentation, essayer les exemples et faire des tests avec le configurateur.

Partager