SDateField <s-date-field>

Un champ pour saisir une date. SDateField est le wrapper Vue 3 typé du web component <s-date-field> de Shopify Polaris.

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

Bonnes pratiques

• Commencez par une date pertinente. Préremplissez value avec la date existante lors d'une modification, ou avec un choix probable lorsque vous en suggérez un.
• Limitez les dates à celles qui ont du sens. Restreignez les dates que les marchands peuvent choisir avec allow et disallow, par exemple en limitant un champ de planification aux dates à venir ou un champ professionnel aux jours du lundi au vendredi.
• Expliquez les limites dans details. Précisez les exigences, comme "Must be a future date", pour que les marchands connaissent les règles avant de choisir.
• Rendez les messages d'error exploitables. Lorsqu'une date n'est pas valide, dites aux marchands comment corriger le problème.

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

Exemple

Value: (empty)

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

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

<template>
  <SDateField label="Delivery date" placeholder="YYYY-MM-DD" v-model="value" />
  <p>Value: {{ value }}</p>
</template>

v-model

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

<SDateField v-model="value" />

équivaut à :

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

Props

Prop	Type	Description
allow	string	Dates pouvant être sélectionnées. Une liste de dates et de plages de dates séparées par des virgules. Les espaces sont autorisés après les virgules. La valeur par défaut '' autorise toutes les dates. - Les dates au format YYYY-MM-DD autorisent une seule date. - Les dates au format YYYY-MM autorisent un mois entier. - Les dates au format YYYY autorisent une année entière. - Les plages s'écrivent start--end. - Les plages sont inclusives. - Si start ou end est omis, la plage est illimitée dans cette direction. - Si des parties de la date sont omises pour start, elles prennent la valeur minimale possible. Ainsi, 2024-- équivaut à 2024-01-01--. - Si des parties de la date sont omises pour end, elles prennent la valeur maximale possible. Ainsi, --2024 équivaut à --2024-12-31. - Les espaces sont autorisés de part et d'autre de --.
allowDays	string	Jours de la semaine pouvant être sélectionnés. Ils sont intersectés avec le résultat de allow et disallow. Une liste de jours séparés par des virgules. Les espaces sont autorisés après les virgules. La valeur par défaut '' n'a aucun effet sur le résultat de allow et disallow. Les jours sont sunday, monday, tuesday, wednesday, thursday, friday, saturday.
autocomplete	"bday-day" | "bday-month" | "bday-year" | "bday" | "cc-expiry-month" | "cc-expiry-year" | "cc-expiry"	Une indication sur le contenu attendu du champ. Lorsqu'elle vaut on (valeur par défaut), cette propriété indique que le champ doit prendre en charge le remplissage automatique, sans autre information sémantique sur le contenu attendu. Lorsqu'elle vaut off, vous indiquez que ce champ contient des informations sensibles ou des contenus jamais enregistrés, comme des codes à usage unique. Vous pouvez aussi fournir une valeur décrivant précisément les données que vous souhaitez voir saisies dans ce champ lors du remplissage automatique.
defaultValue	string	La date initiale lors du premier rendu du champ, au format YYYY-MM-DD. Une chaîne vide signifie qu'aucune date n'est sélectionnée initialement.
defaultView	string	Mois affiché par défaut, au format YYYY-MM. Cette valeur est utilisée jusqu'à ce que view soit défini, directement ou à la suite d'une interaction de l'utilisateur. Par défaut, il s'agit du mois en cours selon les paramètres régionaux de l'utilisateur.
details	any	Texte supplémentaire apportant du contexte ou des indications pour le champ. Ce texte est affiché avec le champ et son libellé afin de fournir davantage d'informations ou d'instructions à l'utilisateur. Il est également exposé aux utilisateurs de lecteurs d'écran.
disabled	boolean	Désactive le champ, empêchant toute interaction.
disallow	string	Dates ne pouvant pas être sélectionnées. Elles sont soustraites de allow. Une liste de dates et de plages de dates séparées par des virgules. Les espaces sont autorisés après les virgules. La valeur par défaut '' n'a aucun effet sur allow. - Les dates au format YYYY-MM-DD interdisent une seule date. - Les dates au format YYYY-MM interdisent un mois entier. - Les dates au format YYYY interdisent une année entière. - Les plages s'écrivent start--end. - Les plages sont inclusives. - Si start ou end est omis, la plage est illimitée dans cette direction. - Si des parties de la date sont omises pour start, elles prennent la valeur minimale possible. Ainsi, 2024-- équivaut à 2024-01-01--. - Si des parties de la date sont omises pour end, elles prennent la valeur maximale possible. Ainsi, --2024 équivaut à --2024-12-31. - Les espaces sont autorisés de part et d'autre de --.
disallowDays	string	Jours de la semaine ne pouvant pas être sélectionnés. Ils sont soustraits de allowDays et intersectés avec le résultat de allow et disallow. Une liste de jours séparés par des virgules. Les espaces sont autorisés après les virgules. La valeur par défaut '' n'a aucun effet sur allowDays. Les jours sont sunday, monday, tuesday, wednesday, thursday, friday, saturday.
error	any	Signale une erreur à l'utilisateur. Le champ reçoit un traitement visuel spécifique pour signaler des problèmes à résoudre immédiatement.
id	string	Un identifiant unique pour l'élément.
label	any	Contenu à utiliser comme libellé du champ.
labelAccessibilityVisibility	"visible" | "exclusive"	Modifie la visibilité du libellé du composant. - visible : le libellé est visible par tous les utilisateurs. - exclusive : le libellé est masqué visuellement mais reste dans l'arbre d'accessibilité.
name	string	Un identifiant du champ, unique au sein du formulaire parent le plus proche.
placeholder	string	Une courte indication décrivant la valeur attendue du champ.
readOnly	boolean	Le champ ne peut pas être modifié par l'utilisateur. Il reste focalisable et est annoncé par les lecteurs d'écran.
required	boolean	Indique si le champ exige une valeur. Cette exigence ajoute une valeur sémantique au champ, mais n'affiche pas automatiquement d'erreur. Pour afficher une erreur lorsque ce champ est vide, utilisez la propriété error.
value	string	La date actuellement sélectionnée, au format YYYY-MM-DD. Une chaîne vide signifie qu'aucune date n'est sélectionnée.
view	string	Mois affiché, au format YYYY-MM. onViewChange est appelé lorsque cette valeur change. Vaut defaultView par défaut.

Events

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

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

Slots

Slot	Description
details
error