날짜 입력 필드 Date input

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

기본

tsx

import { DateInput } from '@krds.ui/react'

export default function DateInputDemo() {
  return <DateInput label="희망 수령일" />
}

달력

tsx

import { Calendar } from '@krds.ui/react'

export default function CalendarDemo() {
  return <Calendar defaultIsOpen position="bottom" />
}

DateInput

Props

이름	타입	기본값	설명
`onChange`	`((value: string) => void)`	-	입력 값이 변경될 때 호출되는 콜백
`label`	`string`	-	레이블
`hint`	`string`	-	도움말 텍스트
`error`	`string`	-	에러 메시지
`success`	`string`	-	성공 메시지
`information`	`string`	-	정보 메시지
`size`	`"small" \| "medium" \| "large"`	`large`	입력 필드 크기 ('small' \| 'medium' \| 'large')
`value`	`string`	-	제어 상태일 때 입력된 값
`defaultValue`	`string`	-	비제어 상태일 때의 초기 값
`isCalendarOpen`	`boolean`	-	달력이 열려있는지 여부
`defaultIsCalendarOpen`	`boolean`	`false`	기본 달력 열림 상태
`onCalendarOpenChange`	`((isOpen: boolean) => void)`	-	달력 열림/닫힘 상태 변경 콜백
`calendarPosition`	`"top" \| "bottom"`	`bottom`	달력 위치 ('top' \| 'bottom')
`disabledDates`	`string[]`	`[]`	비활성화할 날짜 배열 (YYYY.MM.DD 형식)
`eventDates`	`string[]`	`[]`	이벤트가 있는 날짜 배열 (YYYY.MM.DD 형식)
`onYearChange`	`((year: number) => void)`	-	년도 변경 콜백
`onMonthChange`	`((month: number) => void)`	-	월 변경 콜백
`onTodayClick`	`(() => void)`	-	오늘 버튼 클릭 콜백
`onConfirm`	`(() => void)`	-	확인 버튼 클릭 콜백
`onCancel`	`(() => void)`	-	취소 버튼 클릭 콜백
`openButtonLabel`	`string`	`달력 열기`	달력 열기 버튼 aria-label
`prevButtonLabel`	`string`	`이전 달`	이전 달 버튼 aria-label
`nextButtonLabel`	`string`	`다음 달`	다음 달 버튼 aria-label
`yearSelectLabel`	`string`	`연도 선택`	년도 선택 버튼 aria-label
`monthSelectLabel`	`string`	`월 선택`	월 선택 버튼 aria-label
`todayButtonText`	`string`	`오늘`	오늘 버튼 텍스트
`cancelButtonText`	`string`	`취소`	취소 버튼 텍스트
`confirmButtonText`	`string`	`확인`	확인 버튼 텍스트

Calendar

Props

이름	타입	기본값	설명
`mode`	`CalendarMode`	`single`	달력 모드 ('single' \| 'range')
`position`	`CalendarPosition`	`bottom`	달력 위치 ('top' \| 'bottom')
`value`	`string`	-	현재 선택된 날짜 (단일 선택 모드)
`defaultValue`	`string`	-	기본 선택된 날짜 (단일 선택 모드)
`startDate`	`string`	-	범위 선택 시작 날짜
`endDate`	`string`	-	범위 선택 종료 날짜
`defaultStartDate`	`string`	-	기본 범위 선택 시작 날짜
`defaultEndDate`	`string`	-	기본 범위 선택 종료 날짜
`disabledDates`	`string[]`	`[]`	비활성화할 날짜 배열 (YYYY.MM.DD 형식)
`eventDates`	`string[]`	`[]`	이벤트가 있는 날짜 배열 (YYYY.MM.DD 형식)
`isOpen`	`boolean`	-	달력이 열려있는지 여부
`defaultIsOpen`	`boolean`	`false`	기본 달력 열림 상태
`onOpenChange`	`((isOpen: boolean) => void)`	-	달력 열림/닫힘 상태 변경 콜백
`onChange`	`((value: string) => void)`	-	날짜 선택 변경 콜백 (단일 선택)
`onRangeChange`	`((startDate: string, endDate: string) => void)`	-	범위 선택 변경 콜백
`onYearChange`	`((year: number) => void)`	-	년도 변경 콜백
`onMonthChange`	`((month: number) => void)`	-	월 변경 콜백
`onTodayClick`	`(() => void)`	-	오늘 버튼 클릭 콜백
`onConfirm`	`(() => void)`	-	확인 버튼 클릭 콜백
`onCancel`	`(() => void)`	-	취소 버튼 클릭 콜백
`label`	`string`	`기간선택`	입력 필드 레이블
`inputId`	`string`	`cal`	입력 필드 ID
`placeholder`	`string`	`YYYY.MM.DD`	입력 필드 placeholder (단일 선택)
`startPlaceholder`	`string`	`시작날짜`	시작 날짜 입력 필드 placeholder
`endPlaceholder`	`string`	`종료날짜`	종료 날짜 입력 필드 placeholder
`startTitle`	`string`	`시작날짜 입력`	시작 날짜 입력 필드 title
`endTitle`	`string`	`종료날짜 입력`	종료 날짜 입력 필드 title
`openButtonLabel`	`string`	`달력 열기`	달력 열기 버튼 aria-label
`prevButtonLabel`	`string`	`이전 달`	이전 달 버튼 aria-label
`nextButtonLabel`	`string`	`다음 달`	다음 달 버튼 aria-label
`yearSelectLabel`	`string`	`연도 선택`	년도 선택 버튼 aria-label
`monthSelectLabel`	`string`	`월 선택`	월 선택 버튼 aria-label
`todayButtonText`	`string`	`오늘`	오늘 버튼 텍스트
`cancelButtonText`	`string`	`취소`	취소 버튼 텍스트
`confirmButtonText`	`string`	`확인`	확인 버튼 텍스트
`disabled`	`boolean`	`false`	비활성화 여부
`readOnly`	`boolean`	`false`	읽기 전용 여부

날짜 입력 필드 Date input ​

기본 ​

달력 ​

DateInput ​

Props

Calendar ​

Props

날짜 입력 필드 Date input

기본

달력

DateInput

Calendar