Ionic - 10.15 Dates de départ et d'arrivée dans le formulaire de réservation
Cette leçon ajoute les dates de départ et d'arrivée au formulaire de réservation. Les deux champs sont placés côte à côte, et le bouton d'envoi est intégré à la grille. La documentation officielle d'Ionic détaille les options utilisées.
Choisir le format des dates
Les dates utilisent le composant ion-datetime, dont le format d'affichage se règle avec l'attribut display-format. Le jour se note DD, le mois MM et l'année YYYY. Le même format est conservé pour le menu déroulant.
Des valeurs minimale et maximale sont prévues, mais elles seront renseignées plus tard. Les attributs habituels sont ajoutés : ngModel, name et required.
<ion-datetime display-format="DD/MM/YYYY"></ion-datetime>Lier la date de fin à la date de départ
La colonne de la date de fin est copiée depuis celle de la date de départ. Sa valeur minimale ne peut pas être antérieure à la date de départ choisie.
Pour y parvenir, la première colonne reçoit une variable locale de template, qui permet de lire la valeur de la date de départ. Cette variable est ensuite utilisée comme minimum de la date de fin. Les autres bornes seront complétées plus tard.
Placer le bouton d'envoi
Le bouton est placé dans la grille, en reprenant les tailles de colonnes du début. Son type passe à submit, ce qui permet d'envoyer le formulaire. Pour le visuel, il est étendu en bloc.
En résumé
Le formulaire de réservation reçoit une date de départ et une date de fin côte à côte. La date de fin ne peut pas être antérieure au départ, grâce à une variable locale de template. Le bouton d'envoi, de type submit, occupe toute la largeur. La leçon suivante configure le contrôle des dates.
Points clés
- Le composant ion-datetime sert à choisir les dates de départ et d'arrivée.
- Le format d'affichage est défini par l'attribut display-format.
- La date de fin ne peut pas être antérieure à la date de départ.
- Une variable locale de template relie les deux dates.
- Le bouton d'envoi est de type submit et occupe toute la largeur.
Questions fréquentes
Où trouver les options des composants de date ?
La vidéo renvoie vers la documentation officielle d'Ionic, qui détaille les options du composant de date.
Pourquoi la date de fin dépend-elle de la date de départ ?
Une réservation ne peut pas se terminer avant de commencer. La valeur minimale de la date de fin est donc la date de départ.
Que fait le type submit ?
Il indique que le bouton envoie le formulaire lorsqu'on clique dessus.