SDatePicker <s-date-picker>

Ein Kalender zur Auswahl eines einzelnen Datums oder eines Datumsbereichs. SDatePicker ist ein typisierter Vue-3-Wrapper für die Shopify Polaris Web Component <s-date-picker>.

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

Best Practices

• Mit einem sinnvollen Datum beginnen. Füllen Sie value vor, damit Händler schneller auswählen können.
• Abkürzungen für häufige Auswahlen anbieten. Voreinstellungen wie „Today“, „Last 7 days“ oder „This month“ ersparen Händlern das Durchklicken des Kalenders.
• type="range" für Start- und Enddatum verwenden. Bereichsauswahl eignet sich für Berichte, Analysen und andere zeitraumbasierte Filter.
• Nicht zutreffende Daten sperren. Verwenden Sie allow und disallow, damit Händler keine Daten wählen können, die für Ihren Anwendungsfall ungültig sind.
• Platz um den Picker lassen. Geben Sie ihm genug Raum, damit er Bildschirmtastaturen oder anderen interaktiven Elementen nicht im Weg ist.
• Weit entfernte Daten einplanen. Monatsweises Blättern wird über einige Jahre hinaus mühsam. Bieten Sie für Daten außerhalb eines Zeitfensters von etwa 5–10 Jahren Voreinstellungen an oder lassen Sie Händler das Jahr direkt eingeben.

<SDatePicker type="range" />

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

Beispiel

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

<SDatePicker v-model="value" />

entspricht:

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

Props

Prop	Typ	Beschreibung
allow	string	Legt als kommagetrennte Liste fest, welche Daten ausgewählt werden können. Ein leerer String (Standard) erlaubt alle Daten. Formate:* - YYYY-MM-DD: Einzelnes Datum - YYYY-MM: Ganzer Monat - YYYY: Ganzes Jahr - start--end: Datumsbereich (inklusiv, unbegrenzt, wenn start/end fehlt) Beispiele:* - 2024-02--2025: Februar 2024 bis Ende 2025 - 2024-05-09, 2024-05-11: Nur 9. und 11. Mai 2024
allowDays	string	Legt als kommagetrennte Liste fest, welche Wochentage ausgewählt werden können. Schränkt die Daten aus allow und disallow weiter ein. Ein leerer String (Standard) hat keine Auswirkung. Gültige Tage*: sunday, monday, tuesday, wednesday, thursday, friday, saturday Beispiel:* saturday, sunday (nur Wochenenden)
defaultValue	string	Das bzw. die anfangs ausgewählten Daten beim ersten Rendern der Komponente. Ein leerer String bedeutet, dass anfangs kein Datum ausgewählt ist. - Einzelnes Datum im Format YYYY-MM-DD, wenn type auf "single" gesetzt ist - Datumsbereich im Format YYYY-MM-DD--YYYY-MM-DD (inklusive), wenn type auf "range" gesetzt ist
defaultView	string	Der standardmäßig angezeigte Monat im Format YYYY-MM. Wird verwendet, bis der Callback view durch Benutzerinteraktion oder programmatisch gesetzt wird. Standardwert ist der aktuelle Monat in der Locale des Benutzers.
disallow	string	Legt als kommagetrennte Liste fest, welche Daten nicht ausgewählt werden können. Diese Daten werden aus den in allow angegebenen ausgeschlossen. Ein leerer String (Standard) hat keine Auswirkung. Formate:* - YYYY-MM-DD: Einzelnes Datum - YYYY-MM: Ganzer Monat - YYYY: Ganzes Jahr - start--end: Datumsbereich (inklusiv, unbegrenzt, wenn start/end fehlt) Beispiele:* - --2024-02: Alle Daten vor Februar 2024 - 2024-05-09, 2024-05-11: 9. und 11. Mai 2024
disallowDays	string	Legt als kommagetrennte Liste fest, welche Wochentage nicht ausgewählt werden können. Schließt Tage aus allowDays aus und wird mit allow und disallow geschnitten. Ein leerer String (Standard) hat keine Auswirkung. Gültige Tage*: sunday, monday, tuesday, wednesday, thursday, friday, saturday Beispiel:* saturday, sunday (keine Wochenenden)
name	string	Eine Kennung für das Feld, die innerhalb des nächsten umschließenden Formulars eindeutig ist.
type	"single" | "range"	Die erlaubte Art der Datumsauswahl. - single: Ein einzelnes Datum auswählen - range: Einen Datumsbereich auswählen
value	string	Das bzw. die aktuell ausgewählten Daten. Ein leerer String bedeutet, dass kein Datum ausgewählt ist. - Einzelnes Datum im Format YYYY-MM-DD, wenn type auf "single" gesetzt ist - Datumsbereich im Format YYYY-MM-DD--YYYY-MM-DD (inklusive), wenn type auf "range" gesetzt ist
view	string	Der aktuell angezeigte Monat im Format YYYY-MM. Bei einer Änderung wird der Callback viewchange ausgelöst. Standardwert ist defaultView.
visibleMonths	"auto" | "1" | "2"	Steuert, wie viele Monate angezeigt werden. - 'auto': Kontextabhängig. Derzeit wird ein einzelner Monat gerendert, entsprechend '1'. - '1': Rendert jeweils einen Monat. - '2': Rendert zwei aufeinanderfolgende Monate nebeneinander.

Events

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

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