HUA Docs - The Syntax of Emotion

v1.0.0

2026


`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

docs:common.basicUsagetsx

1import { DatePicker } from '@hua-labs/hua';
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/>

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

•Keyboard Navigation: Arrow keys navigate calendar, Enter selects date
•ARIA Labels: Calendar and navigation buttons have accessible labels
•Focus Management: Focus trapped within calendar when open

NumberInput Autocomplete