A date or range picker with a calendar popover.
import { DatePicker } from '@vrum/ui';
<DatePicker
mode={"single"}
variant={"button"}
placeholder={"Choose a date"}
formatString={"MMM d, yyyy"}
clearable={true}
disabled={false}
numberOfMonths={1}
viewSwitching={true}
/>| Prop | Type | Default | Description |
|---|---|---|---|
mode | "range" | "single" | "single" | mode configuration. |
date | Date | none | date configuration. |
onDateChange | ((date: Date | undefined) => void) | none | on date change configuration. |
dateRange | DateRange | none | date range configuration. |
onDateRangeChange | ((range: DateRange | undefined) => void) | none | on date range change configuration. |
numberOfMonths | number | 1 | number of months configuration. |
viewSwitching | boolean | true | view switching configuration. |
variant | "button" | "input" | "button" | Visual appearance within the Vrum design system. |
placeholder | string | "Choose a date" | Hint shown when no value is entered. |
formatString | string | "MMM d, yyyy" | format string configuration. |
disabled | boolean | false | Disable user interaction. |
disabledDates | Matcher | Matcher[] | none | disabled dates configuration. |
clearable | boolean | false | clearable configuration. |
clearLabel | string | "Clear date" | clear label configuration. |
defaultChecked | boolean | none | default checked configuration. |
defaultValue | string | number | readonly string[] | none | Initial value for an uncontrolled component. |
autoFocus | boolean | none | auto focus configuration. |
className | string | none | Additional CSS classes. |
id | string | none | id configuration. |
style | CSSProperties | none | Inline style overrides. |
aria-invalid | boolean | "false" | "true" | "grammar" | "spelling" | none | Indicates the entered value does not conform to the format expected by the application. |
aria-label | string | none | Defines a string value that labels the current element. |
children | ReactNode | none | Content rendered inside the component. |
onFocus | FocusEventHandler<HTMLDivElement> | none | on focus configuration. |
onBlur | FocusEventHandler<HTMLDivElement> | none | on blur configuration. |
onSubmit | SubmitEventHandler<HTMLDivElement> | none | Called when the form is submitted. |
onKeyDown | KeyboardEventHandler<HTMLDivElement> | none | on key down configuration. |
onClick | MouseEventHandler<HTMLDivElement> | none | Called when the control is activated. |
onSelect | ReactEventHandler<HTMLDivElement> | none | on select configuration. |