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
| Prop | Description | Default |
|---|---|---|
size | Size of the input.string | |
fullWidth | If true, the input will take up the full width of its container.boolean | |
selectOnFocus | If true, the input will be focused during the first mount.boolean | |
error | If true, the input will show an error state.boolean | |
containerClassname | Additional classname for the input container element.string | |
start | Content to display before the input.
@deprecated Use `startAdornment` instead.ReactNode | |
end | Content to display after the input.
@deprecated Use `endAdornment` instead.ReactNode | |
startAdornment | Element to display before the Button content.ReactNode | |
endAdornment | Element to display after the Button content.ReactNode | |
onValueChange | Shortcut for the onChange value event.(value: string) => void | |
theme | Theme for the Input.
Custom theme for the date input.InputTheme & DateInputTheme | |
format | The format in which the date should be displayed.{string} | MM/dd/yyyy |
placement | Calendar placement type.Placement | bottom-start |
openOnFocus | Open calendar on field focusboolean | true |
preset | Preset to show in quick filter.PresetOption[] | [] |
openCalendarOptionName | Name of the option to open the calendar.string | |
icon | Icon to show in open calendar button.ReactElement<any, string | JSXElementConstructor<any>> | <CalendarIcon /> |
isRange | boolean | |
value * | Date | [Date, Date] | |
onChange * | ((value: [Date, Date]) => void) | ((value: Date) => void) |