DatePicker

A date input with a popup calendar for selecting a single date. Supports year navigation and date constraints.

Basic Usage

With Label

Start Date

Variants

Sizes

Error State

Date is required

Disabled

Mobile variant

On touch devices the inline calendar popover is too cramped for comfortable selection. mobileVariant lets you pick the strategy:

Value	Mobile rendering
modal (default)	Opens the calendar as a fullscreen Dialog with safe-area padding. Large tap targets, scrollable months.
native	Falls back to the browser's native <input type="date"> picker — gives users the OS-native spinner (iOS wheel, Android material).

<DatePicker mobileVariant="native" label="Date of birth" />

Pick native for system-critical fields (DOB, deadlines) where OS familiarity wins. Pick modal for app-themed selectors where look-consistency matters.

Mobile considerations

• Day cells meet the 44×44px tap target on mobile (cell size scales up automatically on coarse pointer).
• Calendar dialog uses .tui-glass surface — translucent on capable browsers, opaque fallback elsewhere.
• The dialog respects iOS safe areas (notch + home indicator) automatically.

Props

Prop	Type	Default	Description
value	Date | null	-	Controlled selected date
defaultValue	Date | null	-	Default selected date (uncontrolled)
onChange	(date: Date | null) => void	-	Callback when date changes
placeholder	string	-	Placeholder text
variant	'outlined' | 'filled'	'outlined'	Visual variant
size	'sm' | 'md' | 'lg'	'md'	Size
locale	string	'ko-KR'	Locale for day/month labels
dateFormat	string	'yyyy.MM.dd'	Date format string
minDate	Date	-	Minimum selectable date
maxDate	Date	-	Maximum selectable date
disabled	boolean	false	Disabled state
error	boolean	false	Error state
errorMessage	string	-	Error message
label	string	-	Label displayed above the input
required	boolean	false	Whether the field is required (shows red asterisk)
mobileVariant	'modal' | 'native'	'modal'	Mobile rendering: themed fullscreen dialog or native OS picker
className	string	-	Additional CSS class
style	CSSProperties	-	Inline styles