SDateField <s-date-field>

Ein Eingabefeld für ein Datum. SDateField ist ein typisierter Vue-3-Wrapper für die Shopify Polaris Web Component <s-date-field>.

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

Best Practices

• Mit einem sinnvollen Datum beginnen. Füllen Sie value beim Bearbeiten mit dem bestehenden Datum vor oder mit einer wahrscheinlichen Wahl, wenn Sie einen Vorschlag machen.
• Daten auf das Sinnvolle beschränken. Grenzen Sie mit allow und disallow ein, welche Daten Händler wählen können, etwa nur künftige Termine für ein Planungsfeld oder Montag bis Freitag für ein geschäftliches Feld.
• Einschränkungen in details erklären. Nennen Sie Anforderungen wie „Must be a future date“, damit Händler die Regeln vor der Auswahl kennen.
• error-Meldungen umsetzbar formulieren. Ist ein Datum ungültig, sagen Sie Händlern, wie sie es korrigieren.

Die vollständigen Richtlinien finden sich in Shopifys Best Practices für <s-date-field> (auf Englisch).

Beispiel

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 auf <SDateField> bindet die Property value und lauscht auf das DOM-Event input.

<SDateField v-model="value" />

entspricht:

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

Props

Prop	Typ	Beschreibung
allow	string	Daten, die ausgewählt werden können. Eine kommagetrennte Liste von Daten und Datumsbereichen. Leerzeichen nach Kommas sind erlaubt. Der Standardwert '' erlaubt alle Daten. - Daten im Format YYYY-MM-DD erlauben ein einzelnes Datum. - Daten im Format YYYY-MM erlauben einen ganzen Monat. - Daten im Format YYYY erlauben ein ganzes Jahr. - Bereiche werden als start--end angegeben. - Bereiche sind inklusiv. - Fehlt start oder end, ist der Bereich in diese Richtung unbegrenzt. - Fehlen Teile des Datums bei start, wird der kleinstmögliche Wert angenommen. 2024-- ist also gleichbedeutend mit 2024-01-01--. - Fehlen Teile des Datums bei end, wird der größtmögliche Wert angenommen. --2024 ist also gleichbedeutend mit --2024-12-31. - Leerzeichen sind auf beiden Seiten von -- erlaubt.
allowDays	string	Wochentage, die ausgewählt werden können. Sie werden mit dem Ergebnis von allow und disallow geschnitten. Eine kommagetrennte Liste von Tagen. Leerzeichen nach Kommas sind erlaubt. Der Standardwert '' hat keine Auswirkung auf das Ergebnis von allow und disallow. Mögliche Tage sind sunday, monday, tuesday, wednesday, thursday, friday, saturday.
autocomplete	"bday-day" | "bday-month" | "bday-year" | "bday" | "cc-expiry-month" | "cc-expiry-year" | "cc-expiry"	Ein Hinweis auf den vorgesehenen Inhalt des Felds. Bei on (Standard) gibt diese Eigenschaft an, dass das Feld Autofill unterstützen soll, ohne dass weitere semantische Informationen zum vorgesehenen Inhalt vorliegen. Mit off wird angegeben, dass das Feld sensible Informationen oder Inhalte enthält, die nie gespeichert werden, etwa Einmalcodes. Alternativ kann ein Wert angegeben werden, der die konkreten Daten beschreibt, die beim Autofill in dieses Feld eingetragen werden sollen.
defaultValue	string	Der anfängliche Datumswert beim ersten Rendern des Feldes im Format YYYY-MM-DD. Ein leerer String bedeutet, dass anfangs kein Datum ausgewählt ist.
defaultView	string	Standardmäßig anzuzeigender Monat im Format YYYY-MM. Dieser Wert wird verwendet, bis view gesetzt wird, entweder direkt oder durch eine Nutzerinteraktion. Standardmäßig der aktuelle Monat in der Locale des Nutzers.
details	any	Zusätzlicher Text, der Kontext oder Hilfestellung zum Feld bietet. Dieser Text wird zusammen mit dem Feld und seinem Label angezeigt, um dem Nutzer weitere Informationen oder Anweisungen zu geben. Er wird auch Screenreader-Nutzern zugänglich gemacht.
disabled	boolean	Deaktiviert das Feld und verhindert jegliche Interaktion.
disallow	string	Daten, die nicht ausgewählt werden können. Sie werden von allow abgezogen. Eine kommagetrennte Liste von Daten und Datumsbereichen. Leerzeichen nach Kommas sind erlaubt. Der Standardwert '' hat keine Auswirkung auf allow. - Daten im Format YYYY-MM-DD schließen ein einzelnes Datum aus. - Daten im Format YYYY-MM schließen einen ganzen Monat aus. - Daten im Format YYYY schließen ein ganzes Jahr aus. - Bereiche werden als start--end angegeben. - Bereiche sind inklusiv. - Fehlt start oder end, ist der Bereich in diese Richtung unbegrenzt. - Fehlen Teile des Datums bei start, wird der kleinstmögliche Wert angenommen. 2024-- ist also gleichbedeutend mit 2024-01-01--. - Fehlen Teile des Datums bei end, wird der größtmögliche Wert angenommen. --2024 ist also gleichbedeutend mit --2024-12-31. - Leerzeichen sind auf beiden Seiten von -- erlaubt.
disallowDays	string	Wochentage, die nicht ausgewählt werden können. Sie werden von allowDays abgezogen und mit dem Ergebnis von allow und disallow geschnitten. Eine kommagetrennte Liste von Tagen. Leerzeichen nach Kommas sind erlaubt. Der Standardwert '' hat keine Auswirkung auf allowDays. Mögliche Tage sind sunday, monday, tuesday, wednesday, thursday, friday, saturday.
error	any	Zeigt dem Nutzer einen Fehler an. Das Feld erhält eine besondere Gestaltung, um Probleme zu kennzeichnen, die sofort behoben werden müssen.
id	string	Eine eindeutige Kennung für das Element.
label	any	Inhalt, der als Label des Felds verwendet wird.
labelAccessibilityVisibility	"visible" | "exclusive"	Ändert die Sichtbarkeit des Labels der Komponente. - visible: Das Label ist für alle Nutzer sichtbar. - exclusive: Das Label ist visuell ausgeblendet, bleibt aber im Accessibility Tree.
name	string	Eine Kennung für das Feld, die innerhalb des nächsten umschließenden Formulars eindeutig ist.
placeholder	string	Ein kurzer Hinweis, der den erwarteten Wert des Felds beschreibt.
readOnly	boolean	Das Feld kann vom Benutzer nicht bearbeitet werden. Es ist fokussierbar und wird von Screenreadern angesagt.
required	boolean	Ob das Feld einen Wert benötigt. Diese Anforderung verleiht dem Feld semantische Bedeutung, führt aber nicht automatisch zur Anzeige eines Fehlers. Wenn ein Fehler angezeigt werden soll, sobald dieses Feld leer ist, verwenden Sie dafür die Eigenschaft error.
value	string	Das aktuell ausgewählte Datum im Format YYYY-MM-DD. Ein leerer String bedeutet, dass kein Datum ausgewählt ist.
view	string	Angezeigter Monat im Format YYYY-MM. onViewChange wird aufgerufen, wenn sich dieser Wert ändert. Standardmäßig defaultView.

Events

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

Auf diese Events lauschen Sie mit Listenern im Stil von @blur auf <SDateField>.

Slots

Slot	Beschreibung
details
error