Date Range Field
입력 초안과 검증 결과를 유지하면서 두 날짜를 편집합니다.
용법
기본 사용
필요한 구성만 사용하고 초깃값은 컴포넌트가 직접 관리합니다.
Deployment windowAug 22–25, 2026
<!-- Date Range Field / Basic -->
<script setup lang="ts">
import { ref } from 'vue'
import { DateRangeFieldEndInput, DateRangeFieldRoot, DateRangeFieldStartInput } from '@sectile/vue/temporal/date-range-field'
const range = ref({
start: { year: 2026, month: 8, day: 22 },
end: { year: 2026, month: 8, day: 25 },
})
</script>
<template>
<DateRangeFieldRoot v-model="range">
<label>Start date <DateRangeFieldStartInput name="start" /></label>
<label>End date <DateRangeFieldEndInput name="end" /></label>
</DateRangeFieldRoot>
</template>범위 제한
입력값을 설정한 최솟값과 최댓값 범위 안에서 확정합니다.
Deployment windowSep 8–18, 2026
<!-- Date Range Field / Bounded -->
<script setup lang="ts">
import { ref } from 'vue'
import { DateRangeFieldEndInput, DateRangeFieldRoot, DateRangeFieldStartInput } from '@sectile/vue/temporal/date-range-field'
const range = ref({
start: { year: 2026, month: 9, day: 8 },
end: { year: 2026, month: 9, day: 18 },
})
const policies = {
min: { year: 2026, month: 9, day: 1 },
max: { year: 2026, month: 9, day: 30 },
}
</script>
<template>
<DateRangeFieldRoot v-model="range" :policies="policies">
<label>Start date <DateRangeFieldStartInput name="start" /></label>
<label>End date <DateRangeFieldEndInput name="end" /></label>
</DateRangeFieldRoot>
</template>외부 상태 관리
현재 값은 부모가 관리하고, 허용된 변경을 컴포넌트에 다시 전달합니다.
Deployment windowAug 22–25, 2026
<!-- Date Range Field / Controlled -->
<script setup lang="ts">
import { ref } from 'vue'
import { DateRangeFieldEndInput, DateRangeFieldRoot, DateRangeFieldStartInput } from '@sectile/vue/temporal/date-range-field'
const range = ref({
start: { year: 2026, month: 8, day: 22 },
end: { year: 2026, month: 8, day: 25 },
})
</script>
<template>
<DateRangeFieldRoot v-model="range">
<label>Start date <DateRangeFieldStartInput name="start" /></label>
<label>End date <DateRangeFieldEndInput name="end" /></label>
</DateRangeFieldRoot>
</template>API
Vue 패키지: @sectile/vue/temporal/date-range-field
DateRangeFieldRootDateRangeFieldStartInputDateRangeFieldEndInput
Props
DateRangeFieldRootProps
as이 파트가 렌더링할 요소 또는 컴포넌트입니다.
asChild하나뿐인 자식 요소에 파트 속성을 직접 합칠지 여부입니다.
defaultValue컴포넌트가 값을 관리할 때 사용할 초깃값입니다.
disabled사용자 조작을 막을지 여부입니다.
endLabel범위 종료 입력의 접근 가능한 이름입니다.
modelValue부모가 상태를 관리할 때 사용할 현재 값입니다.
policies검증, 이동, 선택 동작을 조정하는 정책입니다.
readonly값 확인만 허용하는 읽기 전용 상태 여부입니다.
required제출 전에 올바른 값이 반드시 있어야 하는지 여부입니다.
startLabel범위 시작 입력의 접근 가능한 이름입니다.
슬롯
DateRangeFieldRootSlotProps
active현재 활성 항목인지 여부입니다.
disabled사용자 조작을 막을지 여부입니다.
endText범위 종료 값을 표시한 문자열입니다.
readonly값 확인만 허용하는 읽기 전용 상태 여부입니다.
startText범위 시작값을 표시한 문자열입니다.
value이 계약이 노출하는 현재 값입니다.
이벤트
DateRangeFieldRoot
update:modelValue컴포넌트가 외부 제어 값의 변경을 요청할 때 발생합니다.
기타 타입
DateRangeFieldValueChangeHandler
type DateRangeFieldValueChangeHandler = (value: DateRange | null) => voidDateRange
| 이름 | 타입 | 필수 |
|---|---|---|
start | DateValue | 필수 |
end | DateValue | 필수 |
파트
공통 범위: [data-scope="date-range-field"]. 컴포넌트 내부로 스타일을 제한할 때 파트 선택자와 함께 사용합니다.
| 파트 | 선택자 | 역할 | 추가 속성 |
|---|---|---|---|
root | [data-part="root"] | 컴포넌트 경계와 내부 파트를 묶습니다. | — |
start-input | [data-part="start-input"] | 시작 값을 편집합니다. | — |
end-input | [data-part="end-input"] | 종료 값을 편집합니다. | — |
키보드 동작
| 키 | 동작 |
|---|---|
| Arrow Up / Arrow Down | 현재 값 구간을 증가시키거나 감소시킵니다. |
| Enter | 입력 중인 값을 확정합니다. |
| Escape | 입력을 취소하고 확정된 값을 복원합니다. |
접근성
시작과 종료 입력에 각각 이름을 제공하고 양 끝의 오류와 순서 있는 범위를 함께 노출합니다.