SDateField <s-date-field>

तारीख डालने के लिए एक input। SDateField Shopify के Polaris <s-date-field> web component का typed Vue 3 wrapper है।

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

Best practices

• एक समझदारी भरी date से शुरू करें। Edit करते समय value में मौजूदा date पहले से भरें, या सुझाव देते समय कोई संभावित विकल्प भरें।
• Dates को उचित दायरे तक सीमित रखें। allow और disallow से वे dates सीमित करें जिन्हें merchants चुन सकते हैं, जैसे scheduling field को आने वाली dates तक या business field को सोमवार से शुक्रवार तक सीमित करना।
• किसी भी सीमा को details में समझाएँ। "Must be a future date" जैसी ज़रूरतें साफ़ लिखें, ताकि merchants चुनने से पहले नियम जान लें।
• error संदेशों को काम का बनाएँ। जब कोई date अमान्य हो, तो merchants को बताएँ कि उसे कैसे ठीक करें।

सभी सुझावों के लिए <s-date-field> के लिए Shopify की best practices (अंग्रेज़ी में) देखें।

उदाहरण

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

<SDateField> पर v-model value property से bind होता है और input DOM event को सुनता है।

<SDateField v-model="value" />

इसके बराबर है:

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

Props

Prop	Type	विवरण
allow	string	चुनी जा सकने वाली तारीखें। तारीखों और date ranges की comma से अलग की गई सूची। commas के बाद whitespace की अनुमति है। default '' सभी तारीखों की अनुमति देता है। - YYYY-MM-DD format की तारीखें एक अकेली तारीख की अनुमति देती हैं। - YYYY-MM format की तारीखें पूरे महीने की अनुमति देती हैं। - YYYY format की तारीखें पूरे साल की अनुमति देती हैं। - ranges start--end के रूप में लिखी जाती हैं। - ranges inclusive होती हैं। - अगर start या end में से कोई छोड़ दिया जाए, तो उस दिशा में range असीमित होती है। - अगर start के लिए तारीख के कुछ हिस्से छोड़ दिए जाएँ, तो उन्हें न्यूनतम संभव value माना जाता है। इसलिए 2024-- और 2024-01-01-- बराबर हैं। - अगर end के लिए तारीख के कुछ हिस्से छोड़ दिए जाएँ, तो उन्हें अधिकतम संभव value माना जाता है। इसलिए --2024 और --2024-12-31 बराबर हैं। - -- के दोनों ओर whitespace की अनुमति है।
allowDays	string	सप्ताह के वे दिन जिन्हें चुना जा सकता है। ये allow और disallow के परिणाम के साथ intersect करते हैं। दिनों की comma से अलग की गई सूची। commas के बाद whitespace की अनुमति है। default '' का allow और disallow के परिणाम पर कोई असर नहीं होता। दिन हैं sunday, monday, tuesday, wednesday, thursday, friday, saturday।
autocomplete	"bday-day" | "bday-month" | "bday-year" | "bday" | "cc-expiry-month" | "cc-expiry-year" | "cc-expiry"	field में अपेक्षित content का संकेत। जब इसे on (default) पर सेट किया जाता है, तो यह property बताती है कि field को autofill सपोर्ट करना चाहिए, लेकिन अपेक्षित content के बारे में आपके पास कोई और semantic जानकारी नहीं है। off पर सेट करके आप बताते हैं कि इस field में संवेदनशील जानकारी है, या ऐसा content है जो कभी save नहीं होता, जैसे one-time codes। इसके बजाय, आप ऐसी value भी दे सकते हैं जो बताए कि autofill के दौरान इस field में कौन-सा विशेष डेटा भरा जाना चाहिए।
defaultValue	string	field के पहली बार render होने पर YYYY-MM-DD format में प्रारंभिक तारीख मान। खाली string का अर्थ है कि शुरुआत में कोई तारीख चुनी नहीं गई है।
defaultView	string	YYYY-MM format में दिखाने के लिए default महीना। यह value तब तक उपयोग होती है जब तक view सेट न हो, चाहे सीधे या user interaction के परिणामस्वरूप। default रूप से user के locale का वर्तमान महीना होता है।
details	any	field के लिए संदर्भ या मार्गदर्शन देने वाला अतिरिक्त text। user को अधिक जानकारी या निर्देश देने के लिए यह text field और उसके label के साथ दिखाया जाता है। यह screen reader users को भी उपलब्ध कराया जाएगा।
disabled	boolean	field को disable करता है, जिससे कोई भी interaction संभव नहीं रहता।
disallow	string	न चुनी जा सकने वाली तारीखें। ये allow में से घटाई जाती हैं। तारीखों और date ranges की comma से अलग की गई सूची। commas के बाद whitespace की अनुमति है। default '' का allow पर कोई असर नहीं होता। - YYYY-MM-DD format की तारीखें एक अकेली तारीख को रोकती हैं। - YYYY-MM format की तारीखें पूरे महीने को रोकती हैं। - YYYY format की तारीखें पूरे साल को रोकती हैं। - ranges start--end के रूप में लिखी जाती हैं। - ranges inclusive होती हैं। - अगर start या end में से कोई छोड़ दिया जाए, तो उस दिशा में range असीमित होती है। - अगर start के लिए तारीख के कुछ हिस्से छोड़ दिए जाएँ, तो उन्हें न्यूनतम संभव value माना जाता है। इसलिए 2024-- और 2024-01-01-- बराबर हैं। - अगर end के लिए तारीख के कुछ हिस्से छोड़ दिए जाएँ, तो उन्हें अधिकतम संभव value माना जाता है। इसलिए --2024 और --2024-12-31 बराबर हैं। - -- के दोनों ओर whitespace की अनुमति है।
disallowDays	string	सप्ताह के वे दिन जिन्हें नहीं चुना जा सकता। ये allowDays में से घटाए जाते हैं, और allow और disallow के परिणाम के साथ intersect करते हैं। दिनों की comma से अलग की गई सूची। commas के बाद whitespace की अनुमति है। default '' का allowDays पर कोई असर नहीं होता। दिन हैं sunday, monday, tuesday, wednesday, thursday, friday, saturday।
error	any	user को error बताएँ। field को एक विशेष style दिया जाएगा, ताकि ऐसी समस्याएँ बताई जा सकें जिन्हें तुरंत हल करना ज़रूरी है।
id	string	element के लिए एक unique identifier।
label	any	field label के रूप में उपयोग होने वाला content।
labelAccessibilityVisibility	"visible" | "exclusive"	component के label की visibility बदलता है। - visible: label सभी users को दिखाई देता है। - exclusive: label दृश्य रूप से छिपा रहता है लेकिन accessibility tree में बना रहता है।
name	string	field के लिए identifier, जो सबसे नज़दीकी containing form के भीतर unique हो।
placeholder	string	एक छोटा संकेत जो field की अपेक्षित value बताता है।
readOnly	boolean	उपयोगकर्ता field को edit नहीं कर सकता। यह focus हो सकता है और screen readers द्वारा announce किया जाएगा।
required	boolean	क्या field के लिए कोई मान ज़रूरी है। यह आवश्यकता field में semantic अर्थ जोड़ती है, लेकिन इससे अपने आप कोई error नहीं दिखेगा। यदि आप चाहते हैं कि यह field खाली होने पर error दिखे, तो आप error property के साथ ऐसा कर सकते हैं।
value	string	YYYY-MM-DD format में वर्तमान में चुनी गई तारीख। खाली string का अर्थ है कि कोई तारीख नहीं चुनी गई है।
view	string	YYYY-MM format में दिखाया गया महीना। यह value बदलने पर onViewChange call होता है। default रूप से defaultView होता है।

Events

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

इन्हें <SDateField> पर @blur जैसे listeners से सुनें।

Slots

Slot	विवरण
details
error