KRDS Vue

날짜 입력 필드 Date input ​

날짜 입력 필드는 사용자가 특정 날짜 또는 기간을 입력하거나 선택하는 데 사용되는 요소이다.

KRDS 날짜 입력 필드KRDS 달력

기본 ​

달력 버튼을 누르면 달력이 열리고 초점이 달력으로 이동합니다. 원본 KRDS처럼 입력 필드 위쪽에 여는 것이 기본이고, 화면에서 위쪽 공간이 달력 높이보다 좁고 아래쪽이 더 넓으면 아래쪽에 엽니다. 날짜를 고른 뒤 확인을 누르면 YYYY.MM.DD 형식으로 입력되고, 두 날짜를 차례로 고르면 YYYY.MM.DD ~ YYYY.MM.DD 기간으로 입력됩니다. Esc나 취소, 달력 바깥 클릭으로 닫힙니다. Esc·취소·확인으로 닫으면 초점이 달력 버튼으로 돌아오고, 바깥을 누르면 누른 곳으로 간 초점을 그대로 둡니다. 연·월 목록을 Esc로 닫으면 초점이 연·월 버튼으로 돌아옵니다.

도움말

vue
<script setup lang="ts">
  import { ref } from 'vue'
  import { KrdsDateInput, KrdsFormGroup, KrdsFormHint, KrdsFormLabel } from '@krds.ui/vue'

  const dateValue = ref('')
</script>

<template>
  <KrdsFormGroup>
    <KrdsFormLabel for="date-input">날짜 선택</KrdsFormLabel>
    <KrdsDateInput id="date-input" v-model="dateValue" placeholder="YYYY.MM.DD" />
    <KrdsFormHint>도움말</KrdsFormHint>
  </KrdsFormGroup>
</template>

비활성화 ​

입력과 달력 열기가 모두 막힙니다.

vue
<script setup lang="ts">
  import { ref } from 'vue'
  import { KrdsDateInput, KrdsFormGroup, KrdsFormLabel } from '@krds.ui/vue'

  const dateValue = ref('2025.03.10')
</script>

<template>
  <KrdsFormGroup>
    <KrdsFormLabel for="date-input-disabled">날짜 선택</KrdsFormLabel>
    <KrdsDateInput id="date-input-disabled" v-model="dateValue" disabled />
  </KrdsFormGroup>
</template>

읽기 전용 ​

직접 입력은 막히지만 달력 버튼은 그대로 사용할 수 있습니다.

vue
<script setup lang="ts">
  import { ref } from 'vue'
  import { KrdsDateInput, KrdsFormGroup, KrdsFormLabel } from '@krds.ui/vue'

  const dateValue = ref('2025.03.10')
</script>

<template>
  <KrdsFormGroup>
    <KrdsFormLabel for="date-input-readonly">날짜 선택</KrdsFormLabel>
    <KrdsDateInput id="date-input-readonly" v-model="dateValue" readonly />
  </KrdsFormGroup>
</template>

일정·휴일 표시 ​

initialYear·initialMonth로 달력을 처음 열 때 보여 줄 달을 정합니다. holidays의 날짜는 일요일처럼 휴일로, eventDates의 날짜는 일정이 있는 날로 표시됩니다. 날짜는 YYYY.MM.DD 형식으로 지정합니다.

vue
<script setup lang="ts">
  import { ref } from 'vue'
  import { KrdsDateInput, KrdsFormGroup, KrdsFormLabel } from '@krds.ui/vue'

  const dateValue = ref('')
</script>

<template>
  <KrdsFormGroup>
    <KrdsFormLabel for="date-input-events">날짜 선택</KrdsFormLabel>
    <KrdsDateInput
      id="date-input-events"
      v-model="dateValue"
      :initial-year="2025"
      :initial-month="5"
      :holidays="['2025.05.05', '2025.05.06']"
      :event-dates="['2025.05.15']"
    />
  </KrdsFormGroup>
</template>

여러 개 배치 ​

달력을 열면 열려 있던 다른 달력은 닫힙니다.

vue
<script setup lang="ts">
  import { ref } from 'vue'
  import { KrdsDateInput, KrdsFormGroup, KrdsFormLabel } from '@krds.ui/vue'

  const start = ref('')
  const end = ref('')
</script>

<template>
  <div class="fieldset">
    <KrdsFormGroup>
      <KrdsFormLabel for="date-input-start">시작일</KrdsFormLabel>
      <KrdsDateInput id="date-input-start" v-model="start" />
    </KrdsFormGroup>
    <KrdsFormGroup>
      <KrdsFormLabel for="date-input-end">종료일</KrdsFormLabel>
      <KrdsDateInput id="date-input-end" v-model="end" />
    </KrdsFormGroup>
  </div>
</template>

body에 렌더 (teleport) ​

달력은 원본 KRDS처럼 입력 필드 바로 뒤에 렌더되므로, overflow로 잘리는 컨테이너(스크롤 영역, 표 등) 안에서는 달력이 잘립니다. teleport를 지정하면 달력을 body에 렌더하고 입력 필드 자리에 맞춰 위치를 잡으며, 스크롤·화면 크기가 바뀌면 위치를 다시 계산합니다.

  • 달력이 문서 끝에 렌더되므로 달력 안에서 Tab으로 빠져나가면 입력 필드 다음 요소가 아니라 문서 끝으로 이동합니다.
  • 모달(KrdsModal) 안에서는 쓰지 마세요. 모달은 aria-modal이라 모달 밖으로 렌더된 달력에 스크린리더가 접근할 수 없고, 달력이 모달 아래에 깔립니다.
vue
<script setup lang="ts">
  import { ref } from 'vue'
  import { KrdsDateInput, KrdsFormGroup, KrdsFormLabel } from '@krds.ui/vue'

  const dateValue = ref('')
</script>

<template>
  <div style="height: 120px; overflow: auto; padding: 1.6rem; border: 1px dashed #b1b8be">
    <KrdsFormGroup>
      <KrdsFormLabel for="date-input-teleport">날짜 선택</KrdsFormLabel>
      <KrdsDateInput id="date-input-teleport" v-model="dateValue" teleport />
    </KrdsFormGroup>
  </div>
</template>

KrdsDateInput ​

Props

이름타입기본값설명
classKrdsClassValue-CSS 클래스
namestring-폼 필드 이름
idstring-HTML ID
requiredbooleanfalse필수 입력 여부
disabledbooleanfalse비활성화 여부
sizeSize'medium'입력 크기
modelValuestring-선택된 날짜 값
placeholderstring'YYYY.MM.DD'플레이스홀더
readonlybooleanfalse읽기 전용 여부
autofocusbooleanfalse자동 포커스
eventDatesstring[][]일정이 있는 날짜 배열 (YYYY.MM.DD 형식)
holidaysstring[][]휴일 날짜 배열 (YYYY.MM.DD 형식)
initialYearnumber-초기 표시 년도 (기본: 현재 년도)
initialMonthnumber-초기 표시 월 (기본: 현재 월)
teleportbooleanfalse달력을 body에 렌더 (overflow로 잘리는 컨테이너 안에서 사용. 모달 안에서는 쓰지 않음)

Events

이름인자설명
input[event: Event]입력할 때 (네이티브 input)
blur[event: FocusEvent]초점을 잃었을 때
change[event: Event]값이 확정됐을 때 (네이티브 change)
focus[event: FocusEvent]초점을 받았을 때
update:modelValue[value: string]날짜를 입력하거나 달력에서 고를 때 (v-model)