SDatePicker <s-date-picker>

एक तारीख या तारीखों की range चुनने के लिए एक calendar। SDatePicker Shopify के Polaris <s-date-picker> web component का typed Vue 3 wrapper है।

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

Best practices

• एक समझदारी भरी date से शुरू करें। value पहले से भरें, ताकि merchants जल्दी चुनाव कर सकें।
• आम विकल्पों के लिए shortcuts दें। "Today", "Last 7 days" या "This month" जैसे presets merchants को calendar में बार-बार click करने से बचाते हैं।
• शुरुआत और अंत की dates के लिए type="range" इस्तेमाल करें। Range selection reports, analytics और समय-अवधि पर आधारित अन्य filters के लिए उपयुक्त है।
• लागू न होने वाली dates को ब्लॉक करें। allow और disallow इस्तेमाल करें, ताकि merchants ऐसी dates न चुन सकें जो आपके use case के लिए अमान्य हों।
• Picker के आसपास जगह छोड़ें। इसे इतनी जगह दें कि यह on-screen keyboards या दूसरे interactive elements के रास्ते में न आए।
• बहुत दूर की dates के लिए योजना बनाएँ। कुछ सालों से आगे महीने-दर-महीने पेज बदलना थकाऊ हो जाता है, इसलिए लगभग 5–10 साल की अवधि से बाहर की dates के लिए presets दें या merchants को सीधे साल दर्ज करने दें।

<SDatePicker type="range" />

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

उदाहरण

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

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

<SDatePicker v-model="value" />

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

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

Props

Prop	Type	विवरण
allow	string	comma से अलग की गई सूची के रूप में बताता है कि कौन-सी तारीखें चुनी जा सकती हैं। खाली string (default) सभी तारीखों की अनुमति देती है। Formats:* - YYYY-MM-DD: एक अकेली तारीख - YYYY-MM: पूरा महीना - YYYY: पूरा साल - start--end: date range (inclusive, start/end छोड़ने पर असीमित) उदाहरण:* - 2024-02--2025: फ़रवरी 2024 से 2025 के अंत तक - 2024-05-09, 2024-05-11: केवल 9 और 11 मई, 2024
allowDays	string	comma से अलग की गई सूची के रूप में बताता है कि सप्ताह के कौन-से दिन चुने जा सकते हैं। यह allow और disallow की तारीखों को और सीमित करता है। खाली string (default) का कोई असर नहीं होता। मान्य दिन*: sunday, monday, tuesday, wednesday, thursday, friday, saturday उदाहरण:* saturday, sunday (केवल weekends)
defaultValue	string	component के पहली बार render होने पर शुरुआत में चुनी गई तारीख(ें)। खाली string का अर्थ है कि शुरुआत में कोई तारीख चुनी नहीं गई है। - जब type को "single" पर सेट किया गया हो, तो YYYY-MM-DD format में एक तारीख - जब type को "range" पर सेट किया गया हो, तो YYYY-MM-DD--YYYY-MM-DD format में तारीखों की range (दोनों सिरे शामिल)
defaultView	string	YYYY-MM format में दिखाया जाने वाला डिफ़ॉल्ट महीना। इसका उपयोग तब तक होता है जब तक view callback उपयोगकर्ता की interaction से या programmatically सेट न हो जाए। डिफ़ॉल्ट रूप से उपयोगकर्ता के locale के अनुसार वर्तमान महीना होता है।
disallow	string	comma से अलग की गई सूची के रूप में बताता है कि कौन-सी तारीखें नहीं चुनी जा सकतीं। ये तारीखें allow में बताई गई तारीखों से बाहर कर दी जाती हैं। खाली string (default) का कोई असर नहीं होता। Formats:* - YYYY-MM-DD: एक अकेली तारीख - YYYY-MM: पूरा महीना - YYYY: पूरा साल - start--end: date range (inclusive, start/end छोड़ने पर असीमित) उदाहरण:* - --2024-02: फ़रवरी 2024 से पहले की सभी तारीखें - 2024-05-09, 2024-05-11: 9 और 11 मई, 2024
disallowDays	string	comma से अलग की गई सूची के रूप में बताता है कि सप्ताह के कौन-से दिन नहीं चुने जा सकते। यह allowDays से दिन बाहर करता है और allow और disallow के साथ intersect करता है। खाली string (default) का कोई असर नहीं होता। मान्य दिन*: sunday, monday, tuesday, wednesday, thursday, friday, saturday उदाहरण:* saturday, sunday (कोई weekend नहीं)
name	string	field के लिए identifier, जो सबसे नज़दीकी containing form के भीतर unique हो।
type	"single" | "range"	अनुमत तारीख चयन का type। - single: एक तारीख चुनें - range: तारीखों की range चुनें
value	string	वर्तमान में चुनी गई तारीख(ें)। खाली string का अर्थ है कि कोई तारीख नहीं चुनी गई है। - जब type को "single" पर सेट किया गया हो, तो YYYY-MM-DD format में एक तारीख - जब type को "range" पर सेट किया गया हो, तो YYYY-MM-DD--YYYY-MM-DD format में तारीखों की range (दोनों सिरे शामिल)
view	string	YYYY-MM format में इस समय दिखाया जा रहा महीना। इसके बदलने पर viewchange callback trigger होता है। डिफ़ॉल्ट रूप से defaultView होता है।
visibleMonths	"auto" | "1" | "2"	नियंत्रित करता है कि कितने महीने दिखाए जाएँ। - 'auto': संदर्भ के अनुसार। फ़िलहाल यह एक ही महीना render करता है, '1' की तरह। - '1': एक बार में एक महीना render करता है। - '2': लगातार दो महीने अगल-बगल render करता है।

Events

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

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