SDatePicker <s-date-picker>

Un calendrier pour sélectionner une date unique ou une plage de dates. SDatePicker est le wrapper Vue 3 typé du web component <s-date-picker> de Shopify Polaris.

import { SDatePicker } from 'polaris-vue-elements'

Bonnes pratiques

• Commencez par une date pertinente. Préremplissez value pour que les marchands fassent leur sélection plus vite.
• Proposez des raccourcis pour les choix courants. Des préréglages comme "Today", "Last 7 days" ou "This month" évitent aux marchands de parcourir le calendrier.
• Utilisez type="range" pour les dates de début et de fin. La sélection de plage convient aux rapports, aux analyses et aux autres filtres fondés sur une période.
• Bloquez les dates non pertinentes. Utilisez allow et disallow pour que les marchands ne puissent pas choisir des dates invalides dans votre cas d'usage.
• Laissez de l'espace autour du sélecteur. Donnez-lui assez de place pour qu'il ne gêne ni les claviers virtuels ni les autres éléments interactifs.
• Anticipez les dates lointaines. Naviguer mois par mois devient fastidieux au-delà de quelques années : pour des dates en dehors d'une fenêtre d'environ 5 à 10 ans, proposez des préréglages ou laissez les marchands saisir l'année directement.

<SDatePicker type="range" />

Consultez les bonnes pratiques de Shopify pour <s-date-picker> (en anglais) pour l'ensemble des recommandations.

Exemple

Selected: (none)

<script setup>
import { ref } from 'vue'
import { SDatePicker } from 'polaris-vue-elements'

const value = ref('')
</script>

<template>
  <SDatePicker type="single" v-model="value" />
  <p>Selected: {{ value }}</p>
</template>

v-model

v-model sur <SDatePicker> est lié à la propriété value et écoute l'event DOM input.

<SDatePicker v-model="value" />

équivaut à :

<SDatePicker :value="value" @input="value = $event.target.value" />

Props

Prop	Type	Description
allow	string	Indique les dates pouvant être sélectionnées, sous forme de liste séparée par des virgules. Une chaîne vide (valeur par défaut) autorise toutes les dates. Formats :* - YYYY-MM-DD : une seule date - YYYY-MM : un mois entier - YYYY : une année entière - start--end : plage de dates (inclusive, illimitée si start/end est omis) Exemples :* - 2024-02--2025 : de février 2024 à la fin de 2025 - 2024-05-09, 2024-05-11 : uniquement les 9 et 11 mai 2024
allowDays	string	Indique les jours de la semaine pouvant être sélectionnés, sous forme de liste séparée par des virgules. Restreint davantage les dates issues de allow et disallow. Une chaîne vide (valeur par défaut) n'a aucun effet. Jours valides* : sunday, monday, tuesday, wednesday, thursday, friday, saturday Exemple :* saturday, sunday (week-ends uniquement)
defaultValue	string	La ou les dates sélectionnées initialement lors du premier rendu du composant. Une chaîne vide signifie qu'aucune date n'est sélectionnée initialement. - Une seule date au format YYYY-MM-DD lorsque type vaut "single" - Une plage de dates au format YYYY-MM-DD--YYYY-MM-DD (bornes incluses) lorsque type vaut "range"
defaultView	string	Le mois affiché par défaut, au format YYYY-MM. Utilisé jusqu'à ce que le callback view soit défini par une interaction de l'utilisateur ou par programmation. Vaut par défaut le mois en cours dans la locale de l'utilisateur.
disallow	string	Indique les dates ne pouvant pas être sélectionnées, sous forme de liste séparée par des virgules. Ces dates sont exclues de celles indiquées dans allow. Une chaîne vide (valeur par défaut) n'a aucun effet. Formats :* - YYYY-MM-DD : une seule date - YYYY-MM : un mois entier - YYYY : une année entière - start--end : plage de dates (inclusive, illimitée si start/end est omis) Exemples :* - --2024-02 : toutes les dates antérieures à février 2024 - 2024-05-09, 2024-05-11 : les 9 et 11 mai 2024
disallowDays	string	Indique les jours de la semaine ne pouvant pas être sélectionnés, sous forme de liste séparée par des virgules. Exclut des jours de allowDays et s'intersecte avec allow et disallow. Une chaîne vide (valeur par défaut) n'a aucun effet. Jours valides* : sunday, monday, tuesday, wednesday, thursday, friday, saturday Exemple :* saturday, sunday (sans les week-ends)
name	string	Un identifiant du champ, unique au sein du formulaire parent le plus proche.
type	"single" | "range"	Le type de sélection de date autorisé. - single : sélectionner une seule date - range : sélectionner une plage de dates
value	string	La ou les dates actuellement sélectionnées. Une chaîne vide signifie qu'aucune date n'est sélectionnée. - Une seule date au format YYYY-MM-DD lorsque type vaut "single" - Une plage de dates au format YYYY-MM-DD--YYYY-MM-DD (bornes incluses) lorsque type vaut "range"
view	string	Le mois actuellement affiché, au format YYYY-MM. Lorsqu'il change, le callback viewchange est déclenché. Vaut defaultView par défaut.
visibleMonths	"auto" | "1" | "2"	Contrôle le nombre de mois affichés. - 'auto' : dépend du contexte. Actuellement, un seul mois est affiché, comme avec '1'. - '1' : affiche un mois à la fois. - '2' : affiche deux mois consécutifs côte à côte.

Events

Event	Type
blur	FocusEvent
change	Event
focus	FocusEvent
input	Event
viewchange	CustomEvent

Écoutez-les avec des listeners de la forme @blur sur <SDatePicker>.