SDatePicker <s-date-picker>

단일 날짜나 날짜 범위를 선택하는 캘린더입니다. SDatePicker은(는) Shopify Polaris <s-date-picker> web component를 위한 타입이 지정된 Vue 3 wrapper입니다.

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

모범 사례

• 적절한 날짜로 시작하세요. value를 미리 채워 판매자가 더 빨리 선택할 수 있게 합니다.
• 자주 고르는 날짜에 바로가기를 제공하세요. "Today", "Last 7 days", "This month" 같은 프리셋이 있으면 판매자가 달력을 일일이 넘기지 않아도 됩니다.
• 시작일과 종료일에는 type="range"를 사용하세요. 범위 선택은 보고서, 분석 등 기간을 기준으로 한 필터에 적합합니다.
• 해당되지 않는 날짜는 막으세요. allow와 disallow를 사용해 판매자가 사용 사례에 맞지 않는 날짜를 고르지 못하게 합니다.
• picker 주변에 여유 공간을 두세요. 화면 키보드나 다른 인터랙티브 요소를 가리지 않도록 충분한 공간을 확보합니다.
• 먼 날짜도 고려하세요. 몇 년 이상 떨어진 날짜는 한 달씩 넘기기가 번거로우므로, 대략 5~10년 범위를 벗어나는 날짜에는 프리셋을 제공하거나 판매자가 연도를 직접 입력할 수 있게 합니다.

<SDatePicker type="range" />

전체 가이드는 <s-date-picker>에 대한 Shopify 모범 사례(영어)를 참고하세요.

예시

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에 바인딩되고 input DOM event를 수신합니다.

<SDatePicker v-model="value" />

다음과 동일합니다:

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

Props

Prop	타입	설명
allow	string	선택할 수 있는 날짜를 쉼표로 구분한 목록으로 지정합니다. 빈 문자열(기본값)은 모든 날짜를 허용합니다. 형식:* - YYYY-MM-DD: 하루 - YYYY-MM: 한 달 전체 - YYYY: 한 해 전체 - start--end: 날짜 범위(양 끝 포함, start/end를 생략하면 제한 없음) 예시:* - 2024-02--2025: 2024년 2월부터 2025년 말까지 - 2024-05-09, 2024-05-11: 2024년 5월 9일과 11일만
allowDays	string	선택할 수 있는 요일을 쉼표로 구분한 목록으로 지정합니다. allow 및 disallow의 날짜를 추가로 제한합니다. 빈 문자열(기본값)은 아무 영향이 없습니다. 유효한 요일*: sunday, monday, tuesday, wednesday, thursday, friday, saturday 예시:* saturday, sunday(주말만)
defaultValue	string	컴포넌트가 처음 렌더링될 때 처음 선택된 날짜입니다. 빈 문자열은 처음에 선택된 날짜가 없음을 의미합니다. - type이 "single"로 설정된 경우 YYYY-MM-DD 형식의 단일 날짜 - type이 "range"로 설정된 경우 YYYY-MM-DD--YYYY-MM-DD 형식의 날짜 범위(양 끝 포함)
defaultView	string	기본으로 표시할 월로, YYYY-MM 형식입니다. 사용자 상호작용이나 프로그래밍 방식으로 view 콜백이 설정될 때까지 사용됩니다. 기본값은 사용자 로케일 기준의 현재 월입니다.
disallow	string	선택할 수 없는 날짜를 쉼표로 구분한 목록으로 지정합니다. 이 날짜들은 allow에 지정된 날짜에서 제외됩니다. 빈 문자열(기본값)은 아무 영향이 없습니다. 형식:* - YYYY-MM-DD: 하루 - YYYY-MM: 한 달 전체 - YYYY: 한 해 전체 - start--end: 날짜 범위(양 끝 포함, start/end를 생략하면 제한 없음) 예시:* - --2024-02: 2024년 2월 이전의 모든 날짜 - 2024-05-09, 2024-05-11: 2024년 5월 9일과 11일
disallowDays	string	선택할 수 없는 요일을 쉼표로 구분한 목록으로 지정합니다. allowDays에서 요일을 제외하고 allow 및 disallow와 교집합을 이룹니다. 빈 문자열(기본값)은 아무 영향이 없습니다. 유효한 요일*: sunday, monday, tuesday, wednesday, thursday, friday, saturday 예시:* saturday, sunday(주말 제외)
name	string	가장 가까운 상위 폼 안에서 고유한 필드 식별자입니다.
type	"single" | "range"	허용되는 날짜 선택 유형입니다. - single: 단일 날짜 선택 - range: 날짜 범위 선택
value	string	현재 선택된 날짜입니다. 빈 문자열은 선택된 날짜가 없음을 의미합니다. - type이 "single"로 설정된 경우 YYYY-MM-DD 형식의 단일 날짜 - type이 "range"로 설정된 경우 YYYY-MM-DD--YYYY-MM-DD 형식의 날짜 범위(양 끝 포함)
view	string	현재 표시되는 월로, YYYY-MM 형식입니다. 변경되면 viewchange 콜백이 호출됩니다. 기본값은 defaultView입니다.
visibleMonths	"auto" | "1" | "2"	표시할 월의 수를 제어합니다. - 'auto': 맥락에 따라 결정됩니다. 현재는 '1'과 동일하게 한 달을 렌더링합니다. - '1': 한 번에 한 달을 렌더링합니다. - '2': 연속된 두 달을 나란히 렌더링합니다.

Events

Event	타입
blur	FocusEvent
change	Event
focus	FocusEvent
input	Event
viewchange	CustomEvent

<SDatePicker>에서 @blur 형식의 리스너로 이 events를 수신하세요.