DatePicker

@hua-labs/ui

v1.0.0

커스텀 포맷과 날짜 범위 제한을 지원하는 캘린더 기반 날짜 선택 컴포넌트입니다.

라이브 데모

기본 사용법

날짜 범위 제한

{year}년 1월 1일 ~ 12월 31일만 선택 가능 2026

크기

상태

Props

이름	타입	기본값	설명
`value`	`Date \| null`	-	Selected date value
`onChange`	`(date: Date \| null) => void`	-	Callback when date changes
`minDate`	`Date`	-	Minimum selectable date
`maxDate`	`Date`	-	Maximum selectable date
`placeholder`	`string`	`"날짜를 선택하세요"`	Placeholder text when no date selected
`disabled`	`boolean`	`false`	Disables the date picker
`error`	`boolean`	`false`	Error state indicator
`dateFormat`	`string`	`"YYYY-MM-DD"`	Date display format
`locale`	`string`	`"ko-KR"`	Locale for date formatting
`markedDates`	`Date[]`	-	Array of dates to mark/highlight in the calendar
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Date picker size

코드 예시

기본 사용법tsx

1import { DatePicker } from '@hua-labs/ui';
2import { useState } from 'react';
3 
4const [date, setDate] = useState<Date | null>(null);
5 
6<DatePicker
7  value={date}
8  onChange={setDate}
9  placeholder="Select a date"
10/>

With Date Rangetsx

1<DatePicker
2  value={date}
3  onChange={setDate}
4  minDate={new Date("2024-01-01")}
5  maxDate={new Date("2024-12-31")}
6  placeholder="Select date in 2024"
7/>

Custom Formattsx

1<DatePicker
2  value={date}
3  onChange={setDate}
4  dateFormat="MM/DD/YYYY"
5  locale="en-US"
6/>

날짜 포맷

dateFormat prop으로 날짜 표시 형식을 지정할 수 있습니다:

• YYYY-MM-DD → 2024-01-15
• MM/DD/YYYY → 01/15/2024
• DD.MM.YYYY → 15.01.2024

접근성

•키보드 탐색: 화살표 키로 캘린더 탐색, Enter로 날짜 선택
•ARIA 레이블: 캘린더와 탐색 버튼에 접근 가능한 레이블 제공
•포커스 관리: 캘린더가 열릴 때 포커스 트랩 적용

NumberInput Autocomplete