DatePicker

Utilisation

Exemples

Outlined

Vous pouvez afficher le VTextField en mode outlined en utilisant la prop du même nom, l’icône passera alors en mode append et la position du menu sera également modifiée.

Date de naissance

Vous pouvez permettre à l’utilisateur de sélectionner une date naissance plus facilement en utilisant la prop birthdate.

Weekends

Vous pouvez afficher les weekends dans le calendrier en utilisant la prop show-weekends.

Période

Vous pouvez créer une période en fournissant une date de début via la prop start-date. Lorsque l’utilisateur aura sélectionné une date date le calendrier, la période sera alors affichée dans le calendrier.

Format

Vous pouvez modifier le format de la date affichée dans le VTextField en utilisant la prop date-format ainsi que le format utilisé avec le v-model en utilisant la prop date-format-return.

Règles de validation

Vous pouvez appliquer des règles de validation Vuetify au VTextField contenu dans le composant en utilisant la prop rules.

Vous pouvez aussi ajouter des règles d’alertes, qui ne bloquent pas la validation, en utilisant la prop warning-rules.

Pour cela, vous pouvez utiliser les règles de validation inclues dans la librairie, comme :

• required
• isDateValid
• notAfterToday
• notBeforeToday

API

Personnalisation

Événements

Vous pouvez écouter des événements directement sur le composant VTextField, pour par exemple ajouter un bouton réinitialiser.

Composants Vuetify

Vous pouvez personnaliser les composants Vuetify contenus dans le pattern DatePicker en utilisant la prop vuetify-options.