Comment créer une sélection de dates d'arrivée/départ

Guide étape par étape pour créer des champs de calendrier connectés pour une plage de dates

Overview

Ce tutoriel montre comment relier deux champs de calendrier, nommés "arrival" (arrivée) et "departure" (départ), pour créer un sélecteur de plage de dates. Vous configurerez le champ Arrivée avec les Limites de Date/Heure et définirez le Champ de Date de Fin, puis appliquerez des paramètres similaires au champ Départ avec le Champ de Date de Début. Le résultat est deux calendriers interconnectés où la date de départ ne peut pas être sélectionnée avant la date d'arrivée choisie.

Nous commençons notre formulaire avec 2 champs Calendrier comme indiqué

Comment créer une sélection de dates d'arrivée/départ image 2

Veuillez noter que les noms de nos champs sont arrival et departure comme indiqué

Dans les paramètres du champ Arrival, nous changeons le format pour utiliser uniquement la Date, nous activons le comportement Date/Time Limits et nous définissons le End Date Field name :

Comment créer une sélection de dates d'arrivée/départ image 3

Dans le champ Departure nous faisons la même chose, mais ici nous définissons le Start Date Field Name :

Comment créer une sélection de dates d'arrivée/départ image 4

 

Le résultat final est 2 champs de calendrier qui sont connectés en plage de dates, nous ne pouvons pas sélectionner de dates de Departure avant le 12 car le 12 est la date d'Arrival.

Comment créer une sélection de dates d'arrivée/départ image 5