Date Time Field
날짜와 현지 시각을 하나의 민간 시간 값으로 편집합니다.
용법
현지 일정 일정 선택
날짜와 현지 시각을 하나의 민간 시간 일정으로 확정합니다.
Scheduled forAug 22, 2026 · 9:30 AM
<!-- Date Time Field / Local Schedule -->
<script setup lang="ts">
import { ref } from 'vue'
import { DateTimeField } from '@sectile/vue/date-time-field'
const value = ref({ date: { year: 2026, month: 8, day: 22 }, time: { hour: 9, minute: 30, second: 0, millisecond: 0 } })
</script>
<template>
<label>
<span>Starts at</span>
<DateTimeField v-model="value" />
</label>
</template>외부 상태 관리
현재 값은 부모가 관리하고, 허용된 변경을 컴포넌트에 다시 전달합니다.
Scheduled forAug 22, 2026 · 9:30 AM
<!-- Date Time Field / Controlled -->
<script setup lang="ts">
import { ref } from 'vue'
import { DateTimeField } from '@sectile/vue/date-time-field'
const value = ref({ date: { year: 2026, month: 8, day: 22 }, time: { hour: 9, minute: 30, second: 0, millisecond: 0 } })
</script>
<template>
<label>
<span>Starts at</span>
<DateTimeField v-model="value" />
</label>
</template>예시
넘나드는 자정 넘김
종료 시각이 다음 날로 넘어가는 일정도 올바르게 유지합니다.
Scheduled forAug 22, 2026 · 11:45 PM
<!-- Date Time Field / Cross Midnight -->
<script setup lang="ts">
import { ref } from 'vue'
import { DateTimeField } from '@sectile/vue/date-time-field'
const value = ref({ date: { year: 2026, month: 8, day: 22 }, time: { hour: 23, minute: 45, second: 0, millisecond: 0 } })
const policies = { step: { minute: 15 } }
</script>
<template>
<label>
<span>Starts at</span>
<DateTimeField v-model="value" :policies="policies" />
</label>
</template>API
Vue 패키지: @sectile/vue/temporal/date-time-field
컴포넌트
DateTimeField
Props
DateTimeFieldProps
defaultValue컴포넌트가 값을 관리할 때 사용할 초깃값입니다.
disabled사용자 조작을 막을지 여부입니다.
label보조 기술이 읽는 컨트롤 이름입니다.
modelValue부모가 상태를 관리할 때 사용할 현재 값입니다.
native브라우저 기본 날짜 또는 시간 입력 UI를 사용할지 여부입니다.
policies검증, 이동, 선택 동작을 조정하는 정책입니다.
readonly값 확인만 허용하는 읽기 전용 상태 여부입니다.
required제출 전에 올바른 값이 반드시 있어야 하는지 여부입니다.
기타 타입
DateTimeValue
ts
type DateTimeValue = NonNullable<DateTimeFieldOptions['value']>DateTimeFieldValueChangeHandler
ts
type DateTimeFieldValueChangeHandler = (value: DateTimeValue | null) => void파트
공통 범위: [data-scope="date-time-field"]. 컴포넌트 내부로 스타일을 제한할 때 파트 선택자와 함께 사용합니다.
| 파트 | 선택자 | 역할 | 추가 속성 |
|---|---|---|---|
input | [data-part="input"] | 편집 값이나 초안을 입력받습니다. | — |
키보드 동작
| 키 | 동작 |
|---|---|
| Arrow Up / Arrow Down | 현재 값 구간을 증가시키거나 감소시킵니다. |
| Enter | 입력 중인 값을 확정합니다. |
| Escape | 입력을 취소하고 확정된 값을 복원합니다. |
접근성
이름이 있는 입력란은 기본 텍스트 입력을 유지하며 날짜와 시간 검증을 하나의 값으로 노출합니다.