2.0 alpha
These docs describe 2.0. Install it with @once-ui-system/core@alpha.
On 1.8.x? Read the 1.x docs
TrademarkTrademarkDocs
Ctrl k
Search docs...
Form Controls

DatePicker

Updated: May 13, 2025
View on GitHub
The DatePicker component provides an interactive calendar interface for selecting dates and times. It supports various features like time selection, month navigation, and date range selection.
Prop
Type
Default
value
Date
onChange
(date: Date) => void
minDate
Date
maxDate
Date
previousMonth
booleantrue
nextMonth
booleantrue
timePicker
booleanfalse
defaultDate
Date
defaultTime
{ hours: number; minutes: number; }
size
lms
m
nested
booleanfalse
className
string
style
React.CSSProperties
currentMonth
Current month
number
currentYear
Current year
number
onMonthChange
(increment: number) => void
range
{ startDate?: Date; endDate?: Date; }
onHover
(date: Date | null) => void
autoFocus
booleanfalse
open
boolean
…and every FlexProps propinherited
  • Keyboard navigation support for date selection
  • Clear visual indicators for selected dates
  • Proper ARIA attributes for screen readers
Edit this page on GitHub
TrademarkTrademark
Built with curiosity by Lorant One and the Design Engineers Club