DatePicker props
DateInput
supports all props from DatePicker,
read through its documentation to learn about all component features that are not listed on this page.
Usage
Value format
Use valueFormat
prop to change dayjs format of value label:
With time
Include time in valueFormat
to allow hours, minutes and seconds to be entered:
Date parser
Use dateParser
prop to replace default date parser. Parser function accepts user input (string)
and must return Date
object:
Allow clear
Set clearable
prop to allow removing value from the input. Input will be cleared if
user selects the same date in dropdown or clears input value:
Min and max date
Set minDate
and maxDate
props to define min and max dates. If date that is after maxDate
or before minDate
is entered, then it will be considered invalid and input value will be reverted
to last known valid date value.
Disabled state
Input props
Accessibility
DatePicker labels
Follow DatePicker documentation to add all required labels to the year picker inside popover.
Input label
Set aria-label
in case you use component without label
:
DateInput component props
Name | Type | Description |
---|---|---|
allowDeselect | boolean | Determines whether value can be deselected when the user clicks on the selected date in the calendar (only when clearable prop is set), defaults to true if clearable prop is set, false otherwise |
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 |
dateParser | (value: string) => Date | Parses user input to convert it to Date object |
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" |
defaultDate | Date | Initial date that is displayed, used for uncontrolled component |
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 |
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 |
fixOnBlur | boolean | Determines whether input value should be reverted to last known valid value on blur, true by default |
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 |
hasNextLevel | boolean | Determines whether next level button should be enabled, defaults to true |
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 |
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 |
maxLevel | "month" | "year" | "decade" | Max level that user can go up to (decade, year, month), defaults to decade |
minDate | Date | Minimum possible date |
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 |
nextDisabled | boolean | Determines whether next control should be disabled, defaults to true |
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 |
onLevelClick | () => void | Called when level button is clicked |
onNext | () => void | Called when next button is clicked |
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 |
onPrevious | () => void | Called when previous 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 |
placeholder | string | |
popoverProps | Partial<Omit<PopoverProps, "children">> | Props added to Popover component |
preserveTime | boolean | Determines whether time (hours, minutes, seconds and milliseconds) should be preserved when new date is picked, true by default |
previousDisabled | boolean | Determines whether previous control should be disabled, defaults to true |
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 |
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 |
value | Date | Value for controlled component |
valueFormat | string | Dayjs format to display input value, "MMMM D, YYYY" 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 |
withNext | boolean | Determines whether next control should be rendered, defaults to true |
withPrevious | boolean | Determines whether previous control should be rendered, defaults to true |
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 |
DateInput component Styles API
Name | Static selector | Description |
---|---|---|
wrapper | .asuikit-DateInput-wrapper | Root Input element |
icon | .asuikit-DateInput-icon | Input icon wrapper on the left side of the input, controlled by icon prop |
input | .asuikit-DateInput-input | Main input element |
rightSection | .asuikit-DateInput-rightSection | Input right section, controlled by rightSection prop |
root | .asuikit-DateInput-root | Root element |
label | .asuikit-DateInput-label | Label element styles, defined by label prop |
error | .asuikit-DateInput-error | Error element styles, defined by error prop |
description | .asuikit-DateInput-description | Description element styles, defined by description prop |
required | .asuikit-DateInput-required | Required asterisk element styles, defined by required prop |
calendar | .asuikit-DateInput-calendar | Calendar root element |
calendarHeader | .asuikit-DateInput-calendarHeader | Calendar header root element |
calendarHeaderControl | .asuikit-DateInput-calendarHeaderControl | Previous/next calendar header controls |
calendarHeaderControlIcon | .asuikit-DateInput-calendarHeaderControlIcon | Icon of previous/next calendar header controls |
calendarHeaderLevel | .asuikit-DateInput-calendarHeaderLevel | Level control (changes levels when clicked, month -> year -> decade) |
decadeLevelGroup | .asuikit-DateInput-decadeLevelGroup | Group of decades levels |
decadeLevel | .asuikit-DateInput-decadeLevel | Decade level root element |
pickerControl | .asuikit-DateInput-pickerControl | Button used to pick months and years |
yearsList | .asuikit-DateInput-yearsList | Years list table element |
yearsListRow | .asuikit-DateInput-yearsListRow | Years list row element |
yearsListCell | .asuikit-DateInput-yearsListCell | Years list cell element |
yearLevelGroup | .asuikit-DateInput-yearLevelGroup | Group of year levels |
yearLevel | .asuikit-DateInput-yearLevel | Year level root element |
monthsList | .asuikit-DateInput-monthsList | Months list table element |
monthsListRow | .asuikit-DateInput-monthsListRow | Months list table row element |
monthsListCell | .asuikit-DateInput-monthsListCell | Months list table cell element |
monthLevelGroup | .asuikit-DateInput-monthLevelGroup | Group or month levels |
monthLevel | .asuikit-DateInput-monthLevel | Month level root element |
monthThead | .asuikit-DateInput-monthThead | thead element of month table |
monthRow | .asuikit-DateInput-monthRow | tr element of month table |
monthTbody | .asuikit-DateInput-monthTbody | tbody element of month table |
monthCell | .asuikit-DateInput-monthCell | td element of month table |
month | .asuikit-DateInput-month | Month table element |
weekdaysRow | .asuikit-DateInput-weekdaysRow | Weekdays tr element |
weekday | .asuikit-DateInput-weekday | Weekday th element |
day | .asuikit-DateInput-day | Month day control |