Date Field
시간대와 무관한 날짜를 구조화된 문자열로 입력하고 검증합니다.
용법
ISO 날짜 날짜
시간대와 무관한 날짜를 ISO 형태로 입력합니다.
Selected dateAug 22, 2026
<!-- Date Field / Iso Date -->
<script setup lang="ts">
import { ref } from 'vue'
import { DateField } from '@sectile/vue/date-field'
const value = ref({ year: 2026, month: 8, day: 22 })
</script>
<template>
<label>
<span>Release date</span>
<DateField v-model="value" />
</label>
</template>범위 제한
입력값을 설정한 최솟값과 최댓값 범위 안에서 확정합니다.
Selected dateAug 22, 2026
<!-- Date Field / Bounded -->
<script setup lang="ts">
import { ref } from 'vue'
import { DateField } from '@sectile/vue/date-field'
const value = ref({ year: 2026, month: 8, day: 22 })
const policies = {
min: { year: 2026, month: 8, day: 1 },
max: { year: 2026, month: 8, day: 31 },
}
</script>
<template>
<label>
<span>Release date</span>
<DateField v-model="value" :policies="policies" />
</label>
</template>외부 상태 관리
현재 값은 부모가 관리하고, 허용된 변경을 컴포넌트에 다시 전달합니다.
Selected dateAug 22, 2026
<!-- Date Field / Controlled -->
<script setup lang="ts">
import { ref } from 'vue'
import { DateField } from '@sectile/vue/date-field'
const value = ref({ year: 2026, month: 8, day: 22 })
</script>
<template>
<label>
<span>Release date</span>
<DateField v-model="value" />
</label>
</template>API
Vue 패키지: @sectile/vue/temporal/date-field
컴포넌트
DateField
Props
DateFieldProps
defaultValue컴포넌트가 값을 관리할 때 사용할 초깃값입니다.
disabled사용자 조작을 막을지 여부입니다.
label보조 기술이 읽는 컨트롤 이름입니다.
modelValue부모가 상태를 관리할 때 사용할 현재 값입니다.
native브라우저 기본 날짜 또는 시간 입력 UI를 사용할지 여부입니다.
policies검증, 이동, 선택 동작을 조정하는 정책입니다.
readonly값 확인만 허용하는 읽기 전용 상태 여부입니다.
required제출 전에 올바른 값이 반드시 있어야 하는지 여부입니다.
기타 타입
DateValue
ts
type DateValue = NonNullable<DateFieldOptions['value']>DateFieldValueChangeHandler
ts
type DateFieldValueChangeHandler = (value: DateValue | null) => void파트
공통 범위: [data-scope="date-field"]. 컴포넌트 내부로 스타일을 제한할 때 파트 선택자와 함께 사용합니다.
| 파트 | 선택자 | 역할 | 추가 속성 |
|---|---|---|---|
input | [data-part="input"] | 편집 값이나 초안을 입력받습니다. | — |
키보드 동작
| 키 | 동작 |
|---|---|
| Arrow Up / Arrow Down | 현재 값 구간을 증가시키거나 감소시킵니다. |
| Enter | 입력 중인 값을 확정합니다. |
| Escape | 입력을 취소하고 확정된 값을 복원합니다. |
접근성
이름이 있는 입력란은 기본 텍스트 입력을 유지하며 오류·비활성·읽기 전용 상태를 전달합니다.