v6.0.35

DateInput

Free date input
Import

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

import { useState } from 'react';
import { DateInput } from '@asuikit/dates';
function Demo() {
const [value, setValue] = useState<Date | null>(null);
return (
<DateInput
value={value}
onChange={setValue}
label="Date input"
placeholder="Date input"
maw={400}
mx="auto"
/>
);
}

Value format

Use valueFormat prop to change dayjs format of value label:

import { DateInput } from '@asuikit/dates';
function Demo() {
return (
<DateInput
valueFormat="YYYY MMM DD"
label="Date input"
placeholder="Date input"
maw={400}
mx="auto"
/>
);
}

With time

Include time in valueFormat to allow hours, minutes and seconds to be entered:

import { DateInput } from '@asuikit/dates';
function Demo() {
return (
<DateInput
valueFormat="DD/MM/YYYY HH:mm:ss"
label="Date input"
placeholder="Date input"
maw={400}
mx="auto"
/>
);
}

Date parser

Use dateParser prop to replace default date parser. Parser function accepts user input (string) and must return Date object:

import { DateInput } from '@asuikit/dates';
function Demo() {
return (
<DateInput
dateParser={(input) => {
if (input === 'WW2') {
return new Date(1939, 8, 1);
}
return new Date(input);
}}
valueFormat="DD/MM/YYYY"
label="Type WW2"
placeholder="Type WW2"
maw={400}
mx="auto"
/>
);
}

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:

import { DateInput } from '@asuikit/dates';
function Demo() {
return <DateInput clearable label="Date input" placeholder="Date input" maw={400} mx="auto" />;
}

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.

import { DateInput } from '@asuikit/dates';
function Demo() {
return (
<DateInput
minDate={new Date()}
maxDate={dayjs(new Date()).add(1, 'month').toDate()}
label="Date input"
placeholder="Date input"
maw={400}
mx="auto"
/>
);
}

Disabled state

import { DateInput } from '@asuikit/dates';
function Demo() {
return (
<DateInput
label="Disabled"
placeholder="Date input"
disabled
/>
);
}

Input props

Radius
xs
sm
md
lg
xl
Size
xs
sm
md
lg
xl
import { DateInput } from '@asuikit/dates';
function Demo() {
return (
<DateInput
placeholder="Current date"
label="Current date"
withAsterisk
/>
);
}

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 /> // -> not ok, input is not labeled
<DateInput label="My input" /> // -> ok, input and label is connected
<DateInput aria-label="My input" /> // -> ok, label is not visible but will be announced by screen reader

DateInput component props

NameTypeDescription
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

NameStatic selectorDescription
wrapper.asuikit-DateInput-wrapperRoot Input element
icon.asuikit-DateInput-iconInput icon wrapper on the left side of the input, controlled by icon prop
input.asuikit-DateInput-inputMain input element
rightSection.asuikit-DateInput-rightSectionInput right section, controlled by rightSection prop
root.asuikit-DateInput-rootRoot element
label.asuikit-DateInput-labelLabel element styles, defined by label prop
error.asuikit-DateInput-errorError element styles, defined by error prop
description.asuikit-DateInput-descriptionDescription element styles, defined by description prop
required.asuikit-DateInput-requiredRequired asterisk element styles, defined by required prop
calendar.asuikit-DateInput-calendarCalendar root element
calendarHeader.asuikit-DateInput-calendarHeaderCalendar header root element
calendarHeaderControl.asuikit-DateInput-calendarHeaderControlPrevious/next calendar header controls
calendarHeaderControlIcon.asuikit-DateInput-calendarHeaderControlIconIcon of previous/next calendar header controls
calendarHeaderLevel.asuikit-DateInput-calendarHeaderLevelLevel control (changes levels when clicked, month -> year -> decade)
decadeLevelGroup.asuikit-DateInput-decadeLevelGroupGroup of decades levels
decadeLevel.asuikit-DateInput-decadeLevelDecade level root element
pickerControl.asuikit-DateInput-pickerControlButton used to pick months and years
yearsList.asuikit-DateInput-yearsListYears list table element
yearsListRow.asuikit-DateInput-yearsListRowYears list row element
yearsListCell.asuikit-DateInput-yearsListCellYears list cell element
yearLevelGroup.asuikit-DateInput-yearLevelGroupGroup of year levels
yearLevel.asuikit-DateInput-yearLevelYear level root element
monthsList.asuikit-DateInput-monthsListMonths list table element
monthsListRow.asuikit-DateInput-monthsListRowMonths list table row element
monthsListCell.asuikit-DateInput-monthsListCellMonths list table cell element
monthLevelGroup.asuikit-DateInput-monthLevelGroupGroup or month levels
monthLevel.asuikit-DateInput-monthLevelMonth level root element
monthThead.asuikit-DateInput-monthTheadthead element of month table
monthRow.asuikit-DateInput-monthRowtr element of month table
monthTbody.asuikit-DateInput-monthTbodytbody element of month table
monthCell.asuikit-DateInput-monthCelltd element of month table
month.asuikit-DateInput-monthMonth table element
weekdaysRow.asuikit-DateInput-weekdaysRowWeekdays tr element
weekday.asuikit-DateInput-weekdayWeekday th element
day.asuikit-DateInput-dayMonth day control