DateTimePicker
Capture datetime from the user
Import
Source
Docs
Package
DatePicker props
DateTimePicker
supports all props from DatePicker,
read through its documentation to learn about all component features that are not listed on this page.
Usage
With seconds
Value format
Use valueFormat
prop to change dayjs format of value label:
Disabled state
Input props
Radius
xs
sm
md
lg
xl
Size
xs
sm
md
lg
xl
Clearable
Set clearable
prop to display clear button in the right section. Note that if you set rightSection
prop, clear button will not be displayed.
Open picker in modal
By default, picker is rendered inside Popover.
You can change that to Modal by setting dropdownType="modal"
:
Accessibility
DatePicker labels
Follow DatePicker documentation to add all required labels to the year picker inside popover.
TimeInput label
Use timeInputProps
to set aria-label
of TimeInput
:
Submit button label
Use submitButtonProps
to add label to the submit button:
Input label
Set aria-label
in case you use component without label
:
DateTimePicker component props
Name | Type | Description |
---|---|---|
ariaLabels | CalendarAriaLabels | aria-label attributes for controls on different levels |
clearButtonProps | Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> | Props added to clear button |
clearable | boolean | Determines whether input value can be cleared, adds clear button to right section, false by default |
columnsToScroll | number | Number of columns to scroll when user clicks next/prev buttons, defaults to numberOfColumns |
date | Date | Date that is displayed, used for controlled component |
decadeLabelFormat | string | ((startOfDecade: Date, endOfDecade: Date) => ReactNode) | dayjs label format to display decade label or a function that returns decade label based on date value, defaults to "YYYY" |
defaultLevel | "month" | "year" | "decade" | Initial level displayed to the user (decade, year, month), used for uncontrolled component |
defaultValue | Date | Default value for uncontrolled component |
description | ReactNode | Input description, displayed after label |
descriptionProps | Record<string, any> | Props spread to description element |
disabled | boolean | Disabled input state |
dropdownType | "modal" | "popover" | Type of dropdown, defaults to popover |
error | ReactNode | Displays error message after input |
errorProps | Record<string, any> | Props spread to error element |
excludeDate | (date: Date) => boolean | Callback function to determine whether the day should be disabled |
firstDayOfWeek | 0 | 1 | 2 | 3 | 4 | 5 | 6 | number 0-6, 0 – Sunday, 6 – Saturday, defaults to 1 – Monday |
getDayAriaLabel | (date: Date) => string | Assigns aria-label to days based on date |
getDayProps | (date: Date) => Partial<DayProps> | Adds props to Day component based on date |
getMonthControlProps | (date: Date) => Partial<PickerControlProps> | Adds props to month picker control based on date |
getYearControlProps | (date: Date) => Partial<PickerControlProps> | Adds props to year picker control based on date |
hideOutsideDates | boolean | Determines whether outside dates should be hidden, defaults to false |
hideWeekdays | boolean | Determines whether weekdays row should be hidden, defaults to false |
icon | ReactNode | Adds icon on the left side of input |
iconWidth | Width<string | number> | Width of icon section |
inputContainer | (children: ReactNode) => ReactNode | Input container component, defaults to React.Fragment |
inputWrapperOrder | ("input" | "label" | "error" | "description")[] | Controls order of the Input.Wrapper elements |
label | ReactNode | Input label, displayed before input |
labelProps | Record<string, any> | Props spread to label element |
labelSeparator | string | Separator between range value |
level | "month" | "year" | "decade" | Current level displayed to the user (decade, year, month), used for controlled component |
locale | string | dayjs locale, defaults to value defined in DatesProvider |
maxDate | Date | Maximum possible date |
minDate | Date | Minimum possible date |
modalProps | Partial<Omit<ModalProps, "children">> | Props added to Modal component |
monthLabelFormat | string | ((month: Date) => ReactNode) | dayjs label format to display month label or a function that returns month label based on month value, defaults to "MMMM YYYY" |
monthsListFormat | string | dayjs format for months list |
nextIcon | ReactNode | Change next icon |
nextLabel | string | aria-label for next button |
numberOfColumns | number | Number of columns to render next to each other |
onChange | (value: Date) => void | Called when value changes |
onDateChange | (date: Date) => void | Called when date changes |
onLevelChange | (level: CalendarLevel) => void | Called when level changes |
onMonthSelect | (date: Date) => void | Called when user clicks month on year level |
onNextDecade | (date: Date) => void | Called when next decade button is clicked |
onNextMonth | (date: Date) => void | Called when next month button is clicked |
onNextYear | (date: Date) => void | Called when next year button is clicked |
onPreviousDecade | (date: Date) => void | Called when previous decade button is clicked |
onPreviousMonth | (date: Date) => void | Called when previous month button is clicked |
onPreviousYear | (date: Date) => void | Called when previous year button is clicked |
onYearSelect | (date: Date) => void | Called when user clicks year on decade level |
placeholder | string | |
popoverProps | Partial<Omit<PopoverProps, "children">> | Props added to Popover component |
previousIcon | ReactNode | Change previous icon |
previousLabel | string | aria-label for previous button |
radius | number | "xs" | "sm" | "md" | "lg" | "xl" | Key of theme.radius or any valid CSS value to set border-radius, theme.defaultRadius by default |
readOnly | boolean | Determines whether the user can modify the value |
renderDay | (date: Date) => ReactNode | Controls day value rendering |
required | boolean | Sets required on input element |
rightSection | ReactNode | Right section of input, similar to icon but on the right |
rightSectionProps | Record<string, any> | Props spread to rightSection div element |
rightSectionWidth | Width<string | number> | Width of right section, is used to calculate input padding-right |
size | "xs" | "sm" | "md" | "lg" | "xl" | Input size |
sortDates | boolean | Determines whether dates value should be sorted before onChange call, only applicable when type="multiple", true by default |
submitButtonProps | ActionIconProps & Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> | Props added to submit button |
timeInputProps | TimeInputProps & { ref?: Ref<HTMLInputElement>; } | TimeInput component props |
value | Date | Controlled component value |
valueFormat | string | Dayjs format to display input value, "DD/MM/YYYY HH:mm" by default |
variant | Variants<"unstyled" | "default" | "filled"> | Defines input appearance, defaults to default in light color scheme and filled in dark |
weekdayFormat | string | ((date: Date) => ReactNode) | dayjs format for weekdays names, defaults to "dd" |
weekendDays | DayOfWeek[] | Indices of weekend days, 0-6, where 0 is Sunday and 6 is Saturday, defaults to value defined in DatesProvider |
withAsterisk | boolean | Determines whether required asterisk should be rendered, overrides required prop, does not add required attribute to the input |
withCellSpacing | boolean | Determines whether controls should be separated by spacing, true by default |
withSeconds | boolean | Determines whether seconds input should be rendered |
wrapperProps | Record<string, any> | Properties spread to root element |
yearLabelFormat | string | ((year: Date) => ReactNode) | dayjs label format to display year label or a function that returns year label based on year value, defaults to "YYYY" |
yearsListFormat | string | dayjs format for years list |
DateTimePicker component Styles API
Name | Static selector | Description |
---|---|---|
wrapper | .asuikit-DateTimePicker-wrapper | Root Input element |
icon | .asuikit-DateTimePicker-icon | Input icon wrapper on the left side of the input, controlled by icon prop |
input | .asuikit-DateTimePicker-input | Main input element |
rightSection | .asuikit-DateTimePicker-rightSection | Input right section, controlled by rightSection prop |
root | .asuikit-DateTimePicker-root | Root element |
label | .asuikit-DateTimePicker-label | Label element styles, defined by label prop |
error | .asuikit-DateTimePicker-error | Error element styles, defined by error prop |
description | .asuikit-DateTimePicker-description | Description element styles, defined by description prop |
required | .asuikit-DateTimePicker-required | Required asterisk element styles, defined by required prop |
calendar | .asuikit-DateTimePicker-calendar | Calendar root element |
calendarHeader | .asuikit-DateTimePicker-calendarHeader | Calendar header root element |
calendarHeaderControl | .asuikit-DateTimePicker-calendarHeaderControl | Previous/next calendar header controls |
calendarHeaderControlIcon | .asuikit-DateTimePicker-calendarHeaderControlIcon | Icon of previous/next calendar header controls |
calendarHeaderLevel | .asuikit-DateTimePicker-calendarHeaderLevel | Level control (changes levels when clicked, month -> year -> decade) |
decadeLevelGroup | .asuikit-DateTimePicker-decadeLevelGroup | Group of decades levels |
decadeLevel | .asuikit-DateTimePicker-decadeLevel | Decade level root element |
pickerControl | .asuikit-DateTimePicker-pickerControl | Button used to pick months and years |
yearsList | .asuikit-DateTimePicker-yearsList | Years list table element |
yearsListRow | .asuikit-DateTimePicker-yearsListRow | Years list row element |
yearsListCell | .asuikit-DateTimePicker-yearsListCell | Years list cell element |
yearLevelGroup | .asuikit-DateTimePicker-yearLevelGroup | Group of year levels |
yearLevel | .asuikit-DateTimePicker-yearLevel | Year level root element |
monthsList | .asuikit-DateTimePicker-monthsList | Months list table element |
monthsListRow | .asuikit-DateTimePicker-monthsListRow | Months list table row element |
monthsListCell | .asuikit-DateTimePicker-monthsListCell | Months list table cell element |
monthLevelGroup | .asuikit-DateTimePicker-monthLevelGroup | Group or month levels |
monthLevel | .asuikit-DateTimePicker-monthLevel | Month level root element |
monthThead | .asuikit-DateTimePicker-monthThead | thead element of month table |
monthRow | .asuikit-DateTimePicker-monthRow | tr element of month table |
monthTbody | .asuikit-DateTimePicker-monthTbody | tbody element of month table |
monthCell | .asuikit-DateTimePicker-monthCell | td element of month table |
month | .asuikit-DateTimePicker-month | Month table element |
weekdaysRow | .asuikit-DateTimePicker-weekdaysRow | Weekdays tr element |
weekday | .asuikit-DateTimePicker-weekday | Weekday th element |
day | .asuikit-DateTimePicker-day | Month day control |
placeholder | .asuikit-DateTimePicker-placeholder | Placeholder element |
timeWrapper | .asuikit-DateTimePicker-timeWrapper | Wrapper around time input and submit button |
timeInput | .asuikit-DateTimePicker-timeInput | TimeInput |