Le composant v-date-picker
est indépendant et peut être utilisé partout. Il permet de choisir une date à partir d'un calendrier.
v-date-picker
accepts ISO 8601 date strings (YYYY-MM-DD). For more information regarding ISO 8601 and other standards, visit the official ISO (International Organization for Standardization) International Standards page.
2 orientations possibles : portrait (défaut) et paysage. Par défaut dès qu'une date est choisie, l’événement "input" est activée, en sélectionnant "reactive" cela met à jour le model.
Sélectionnez le composant désiré ci-dessous afin de voir les props, slots, événements et méthodes disponibles.
Vous trouverez ci-dessous une collection d'exemples simples ou complexes.
Les couleurs du sélecteur de date peuvent être définies en utilisant les propriétés color
et header-color
. Si le propheader-color
nest pas fourni, l
en-tête utilisera la valeur de propcolor
.
Vous pouvez spécifier les dates autorisées en utilisant des tableaux, des objets et des fonctions.
Vous pouvez spécifier la largeur du sélecteur ou la rendre pleine largeur.
The v-date-picker
component supports elevation up to a maximum value of 24. For more information on elevations, visit the official Material Design elevations page.
You can watch the pickerDate
which is the displayed month/year (depending on the picker type and active view) to perform some action when it changes.
Le sélecteur de date supporte l'internationalisation à travers l'objet de date JavaScript. Spécifiez une balise de langue BCP 47 en utilisant le prop locale
et définissez le premier jour de la semaine avec le prop first-day-of-week
.
You can override the default icons used in the picker.
Selecting new date could be disabled by adding readonly prop.
Par défaut, la date actuelle est affichée en utilisant le bouton indiqué - show-current prop vous permet de supprimer la bordure ou de sélectionner une date différente à afficher comme la date actuelle.
Month pickers come in two orientation variations, portrait (default) and landscape.
Month picker colors can be set using the color
and header-color
props. If header-color
prop is not provided header will use the color
prop value.
You can specify allowed months using arrays, objects or functions.
Month pickers can now select multiple months with the multiple
prop. If using multiple
then the month picker expects its model to be an array.
Vous pouvez spécifier la largeur du sélecteur ou la rendre pleine largeur.
Le sélecteur de mois supporte l'internationalisation à travers l'objet JavaScript Date. Spécifiez une balise de langue BCP 47 en utilisant le prop locale
et définissez le premier jour de la semaine avec le prop first-day-of-week
.
You can override the default icons used in the picker.
Selecting new date could be disabled by adding readonly prop.
By default the current month is displayed using outlined button - show-current prop allows you to remove the border or select different month to be displayed as the current one.
If you need to display date in the custom format (different than YYYY-MM-DD) you need to use the formatting function.
Formatting dates is possible also with external libs such as Moment.js or date-fns
Date picker can now select multiple dates with the multiple
prop. If using multiple
then date picker expects its model to be an array.
Date picker can select date range with the range
prop. When using range
prop date picker expects its model to be an array of length 2 or empty.
À partir du sélecteur d'année par défaut, la plage de dates de repos et la fermeture du menu de sélection après avoir sélectionné la journée font le choix parfait du sélecteur d'anniversaire.
Vous pouvez spécifier des événements en utilisant des tableaux, des objets ou des fonctions. Pour changer la couleur par défaut de l'événement, utilisez event-color prop. Votre fonction événements ou objet peut retourner un tableau de couleurs (matériaux ou css) au cas où vous souhaitez afficher plusieurs indicateurs d'événements.
Prêt pour plus ? Continuez la lecture avec :