SDateField <s-date-field>

날짜를 입력하는 입력 필드입니다. SDateField은(는) Shopify Polaris <s-date-field> web component를 위한 타입이 지정된 Vue 3 wrapper입니다.

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

모범 사례

• 적절한 날짜로 시작하세요. 편집할 때는 기존 날짜로, 제안할 때는 가능성이 높은 날짜로 value를 미리 채웁니다.
• 의미 있는 날짜로 제한하세요. allow와 disallow로 판매자가 고를 수 있는 날짜를 좁힙니다. 예를 들어 일정 필드는 앞으로의 날짜로, 영업일 필드는 월요일부터 금요일까지로 제한할 수 있습니다.
• 제한 사항은 details에서 설명하세요. "Must be a future date"처럼 요구 사항을 명시해 판매자가 고르기 전에 규칙을 알 수 있게 합니다.
• error 메시지는 해결 방법을 담아 작성하세요. 날짜가 유효하지 않을 때 판매자에게 어떻게 고칠 수 있는지 알려 줍니다.

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

예시

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

<SDateField v-model="value" />

다음과 동일합니다:

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

Props

Prop	타입	설명
allow	string	선택할 수 있는 날짜입니다. 날짜와 날짜 범위를 쉼표로 구분한 목록입니다. 쉼표 뒤에는 공백을 넣을 수 있습니다. 기본값 ''는 모든 날짜를 허용합니다. - YYYY-MM-DD 형식의 날짜는 하루를 허용합니다. - YYYY-MM 형식의 날짜는 한 달 전체를 허용합니다. - YYYY 형식의 날짜는 한 해 전체를 허용합니다. - 범위는 start--end로 표현합니다. - 범위는 양 끝을 포함합니다. - start나 end 중 하나를 생략하면 해당 방향으로 범위가 제한되지 않습니다. - start에서 날짜의 일부를 생략하면 가능한 최솟값으로 간주합니다. 따라서 2024--는 2024-01-01--와 같습니다. - end에서 날짜의 일부를 생략하면 가능한 최댓값으로 간주합니다. 따라서 --2024는 --2024-12-31과 같습니다. - -- 양쪽에는 공백을 넣을 수 있습니다.
allowDays	string	선택할 수 있는 요일입니다. allow 및 disallow의 결과와 교집합을 이룹니다. 요일을 쉼표로 구분한 목록입니다. 쉼표 뒤에는 공백을 넣을 수 있습니다. 기본값 ''는 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"	필드에 입력될 콘텐츠에 대한 힌트입니다. on(기본값)으로 설정하면 필드가 자동 완성을 지원해야 하지만 입력될 콘텐츠에 대한 추가적인 의미 정보는 없음을 나타냅니다. off로 설정하면 이 필드에 민감한 정보나 일회용 코드처럼 저장되지 않는 콘텐츠가 들어간다는 것을 나타냅니다. 또는 자동 완성 시 이 필드에 입력되기를 원하는 구체적인 데이터를 설명하는 값을 지정할 수도 있습니다.
defaultValue	string	필드가 처음 렌더링될 때의 초기 날짜 값으로, YYYY-MM-DD 형식입니다. 빈 문자열은 처음에 선택된 날짜가 없음을 의미합니다.
defaultView	string	YYYY-MM 형식으로 표시할 기본 월입니다. 이 값은 직접 설정하거나 사용자 상호작용의 결과로 view가 설정될 때까지 사용됩니다. 기본값은 사용자 로캘 기준의 현재 월입니다.
details	any	필드에 대한 맥락이나 안내를 제공하는 추가 텍스트입니다. 이 텍스트는 필드 및 레이블과 함께 표시되어 사용자에게 더 많은 정보나 지침을 제공합니다. 스크린 리더 사용자에게도 노출됩니다.
disabled	boolean	필드를 비활성화하여 모든 상호작용을 막습니다.
disallow	string	선택할 수 없는 날짜입니다. allow에서 제외됩니다. 날짜와 날짜 범위를 쉼표로 구분한 목록입니다. 쉼표 뒤에는 공백을 넣을 수 있습니다. 기본값 ''는 allow에 영향을 주지 않습니다. - YYYY-MM-DD 형식의 날짜는 하루를 허용하지 않습니다. - YYYY-MM 형식의 날짜는 한 달 전체를 허용하지 않습니다. - YYYY 형식의 날짜는 한 해 전체를 허용하지 않습니다. - 범위는 start--end로 표현합니다. - 범위는 양 끝을 포함합니다. - start나 end 중 하나를 생략하면 해당 방향으로 범위가 제한되지 않습니다. - start에서 날짜의 일부를 생략하면 가능한 최솟값으로 간주합니다. 따라서 2024--는 2024-01-01--와 같습니다. - end에서 날짜의 일부를 생략하면 가능한 최댓값으로 간주합니다. 따라서 --2024는 --2024-12-31과 같습니다. - -- 양쪽에는 공백을 넣을 수 있습니다.
disallowDays	string	선택할 수 없는 요일입니다. allowDays에서 제외되며, allow 및 disallow의 결과와 교집합을 이룹니다. 요일을 쉼표로 구분한 목록입니다. 쉼표 뒤에는 공백을 넣을 수 있습니다. 기본값 ''는 allowDays에 영향을 주지 않습니다. 요일은 sunday, monday, tuesday, wednesday, thursday, friday, saturday입니다.
error	any	사용자에게 오류를 표시합니다. 즉시 해결해야 하는 문제를 전달하기 위해 필드에 특정한 스타일이 적용됩니다.
id	string	요소의 고유 식별자입니다.
label	any	필드 레이블로 사용할 콘텐츠입니다.
labelAccessibilityVisibility	"visible" | "exclusive"	컴포넌트 레이블의 표시 여부를 변경합니다. - visible: 레이블이 모든 사용자에게 표시됩니다. - exclusive: 레이블이 시각적으로는 숨겨지지만 접근성 트리에는 남아 있습니다.
name	string	가장 가까운 상위 폼 안에서 고유한 필드 식별자입니다.
placeholder	string	필드에 입력할 값을 설명하는 짧은 힌트입니다.
readOnly	boolean	사용자가 필드를 편집할 수 없습니다. 포커스는 가능하며 스크린 리더가 읽어 줍니다.
required	boolean	필드에 값이 필요한지 여부입니다. 이 요구 사항은 필드에 시맨틱 의미를 더하지만 자동으로 오류를 표시하지는 않습니다. 이 필드가 비어 있을 때 오류를 표시하려면 error 속성을 사용하면 됩니다.
value	string	현재 선택된 날짜로, YYYY-MM-DD 형식입니다. 빈 문자열은 선택된 날짜가 없음을 의미합니다.
view	string	YYYY-MM 형식으로 표시되는 월입니다. 이 값이 바뀌면 onViewChange가 호출됩니다. 기본값은 defaultView입니다.

Events

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

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

Slots

Slot	설명
details
error