Vuetify

Boutique

Entreprises

Le composant v-date-picker est indépendant et peut être utilisé partout. Il permet de choisir une date à partir d'un calendrier.

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, len-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.

Handle events such as @click, @dblclick, @mouseenter, and more when interacting with date, month, and year buttons.

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.

Lorsque vous intégrez un sélecteur dans un champ v-text, il est recommandé d'utiliser le prop readonly qui empêchera le déclenchement des claviers mobiles. Pour enregistrer l'espace vertical, vous pouvez aussi cacher le titre du sélecteur.

Les sélectionneurs exposent un emplacement qui vous permet de vous brancher dans la fonctionnalité de sauvegarde et d'annulation. Cela maintiendra une ancienne valeur qui peut être remplacée si l'utilisateur annule.

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.

Lorsque vous intégrez un sélecteur dans un champ v-text, il est recommandé d'utiliser le prop readonly qui empêchera le déclenchement des claviers mobiles. Pour enregistrer l'espace vertical, vous pouvez aussi cacher le titre du sélecteur.

Les sélectionneurs exposent un emplacement qui vous permet de vous brancher dans la fonctionnalité de sauvegarde et d'annulation. Cela maintiendra une ancienne valeur qui peut être remplacée si l'utilisateur annule.

Caught a mistake or want to contribute to the documentation? Edit Layout on GitHub!