PureKit UI logoPureKit UI

DatePicker

Select dates with flexible localization and formatting.

1npx purekit add datepicker
1import Datepicker from "@/components/purekit-ui/datepicker/datepicker"

Basic

Simple date picker

Contained

Contained input variant

Buddhist Era

Use Buddhist calendar

Slots

Customize internal input elements

Custom Styles (Purple Theme)

Customize picker appearance using styles prop

Custom Styles (Dark Theme)

Dark mode styling example

Main Props

NameTypeDefaultDescription
color
Color'blue'Color variant
minYear
numbernew Date().getFullYear() - 100Minimum selectable year
maxYear
numbernew Date().getFullYear() + 100Maximum selectable year
variantInput
'floating' | 'contained''floating'Input variant
customLocale
CustomLocale-Custom months and days
label
string-Input label
size
Size'md'Component size
format
string'YYYY-MM-DD'Display format
locale
'th' | 'en''en'Localization
isBudd
booleanfalseUse Buddhist era
onChange
(value: string, date: DateTime) => void-Change handler
value
any-Selected value
disabledPastDate
string-Disable dates before specific date
disabledFutureDate
string-Disable dates after specific date
disabledDates
string[]-List of disabled dates
disabledFuture
booleanfalseDisable future dates
disabledPast
booleanfalseDisable past dates
slots
SlotsProps-Customize internal input components via { input, inputFloating }
hidePrevNextDays
booleanfalseHide prev/next days
disabled
booleanfalseDisable input
disabledSearch
booleantrueDisable search input
styles
DatePickerStyles{}Custom styles object for all elements (recommended over className props)
idPopOver
string''Popover id
customDisplay
(date: string) => void-Custom display value
openPopOver
boolean-Controlled open state
setOpenPopOver
(open: boolean) => void-Setter for open state
action
React.ReactNode-Custom action element
className
string-Additional classes
classNameRoot
string-Root wrapper class
classNameIconRight
string-Class for right icon

Panel Props

NameTypeDefaultDescription
classNamePickerPanelRoot
string''Panel root class
classNamePickerPanel
string''Panel class
classNamePickerHeaderDivider
string''Header divider class

Day Props

NameTypeDefaultDescription
classNamePickerDaysHeaderRoot
string''Days header root
classNamePickerDaysHeaderWrapperPrev
string''Prev button wrapper
classNamePickerDaysHeaderPrev
string''Prev button class
classNamePickerDaysHeaderWrapperNext
string''Next button wrapper
classNamePickerDaysHeaderNext
string''Next button class
classNamePickerDaysHeaderTextRoot
string''Header text root
classNamePickerDaysHeaderTextMonth
string''Month text class
classNamePickerDaysHeaderTextYear
string''Year text class
classNamePickerDaysHeaderWrapperIconDown
string''Icon down wrapper
classNamePickerDaysHeaderIconDown
string''Icon down class
classNamePickerDaysGridRoot
string''Days grid root
classNamePickerDaysTextWeek
string''Week text class
classNamePickerDaysDay
string''Day cell class
classNamePickerDaysDayPrevNext
string''Prev/next day class
classNamePickerDaysDayCurrent
string''Current day class
classNamePickerDaysDayActive
string''Active day class
classNamePickerDaysDayDisabled
string''Disabled day class
classNamePickerDaysDayEnabled
string''Enabled day class

Month Props

NameTypeDefaultDescription
classNamePickerMonthsHeaderRoot
string''Months header root
classNamePickerMonthsHeaderWrapperDoublePrev
string''Double prev wrapper
classNamePickerMonthsHeaderDoublePrev
string''Double prev class
classNamePickerMonthsHeaderWrapperPrev
string''Prev wrapper
classNamePickerMonthsHeaderPrev
string''Prev class
classNamePickerMonthsHeaderWrapperDoubleNext
string''Double next wrapper
classNamePickerMonthsHeaderDoubleNext
string''Double next class
classNamePickerMonthsHeaderWrapperNext
string''Next wrapper
classNamePickerMonthsHeaderNext
string''Next class
classNamePickerMonthsHeaderTextRoot
string''Header text root
classNamePickerMonthsHeaderTextYear
string''Year text
classNamePickerMonthsHeaderWrapperIconDown
string''Icon down wrapper
classNamePickerMonthsHeaderIconDown
string''Icon down
classNamePickerMonthsGridRoot
string''Months grid root
classNamePickerMonthsMonth
string''Month cell
classNamePickerMonthsMonthActive
string''Active month

Year Props

NameTypeDefaultDescription
classNamePickerYearsHeaderTextRoot
string''Years header root
classNamePickerYearsHeaderText
string''Years header text
classNamePickerYearsGridRoot
string''Years grid root
classNamePickerYearsYear
string''Year cell
classNamePickerYearsYearActive
string''Active year