Skip to Content

Date Input

A visual way to choose a date using a calendar view and input box.

Examples

Basic Usage

Date Presets

Allow to select a date from a predefined set of dates, useful for applications requiring a specific date selection. User can use the presets prop to define the presets.

API

Component

NameTypeDefault
sizestring

Size of the input.

'medium'
fullWidthboolean

If true, the input will take up the full width of its container.

selectOnFocusboolean

If true, the input will be focused during the first mount.

errorboolean

If true, the input will show an error state.

containerClassnamestring

Additional classname for the input container element.

startReactNode

Content to display before the input.

endReactNode

Content to display after the input.

onValueChange(value: string) => void

Shortcut for the onChange value event.

themeInputTheme & DateInputTheme

Theme for the Input. Custom theme for the date input.

formatstring

The format in which the date should be displayed.

'MM/dd/yyyy'
placementPlacement

Calendar placement type.

'bottom-start'
openOnFocusboolean

Open calendar on field focus

true
presetPresetOption[]

Preset to show in quick filter.

[]
openCalendarOptionNamestring

Name of the option to open the calendar.

iconReactElement<unknown, string | JSXElementConstructor<any>>

Icon to show in open calendar button.

<CalendarIcon />
isRangeboolean
valueDate | [Date, Date]
onChange((value: [Date, Date]) => void) | ((value: Date) => void)
Last updated on