Coral is a thoroughly developed design system widely adopted by developers and designers for creating beautiful and user-friendly Sea internal products.
Copyright © 2018-2025 Sea Labs
DatePicker
Designer doc
Datepicker is an input component to select date in Dayjs format.
Example
Basic Usage
View code
Specifying custom 100% width for the input is quite common. However, to achieve this you may need to take a small extra step by providing custom DatePickerInput element as shown in below section Customizing DatePicker Input. If you want to have a fixed width, using css selector [data-coral-date-picker-input] will do.
Formatting date
By default DatePicker uses YYYY/MM/DD format to:
- Set input on selection
- Parse input for autoselection
- Default placeholder
You can provide dateFormat prop to override this default format.
View code
Using parseDate and displayDate
You can also pass your custom input parsing and display function. For example, this Datepicker will be able to translate ‘Today’, ‘Yesterday’, and ‘Tomorrow’.
View code
Disabling individual dates
You can specify isDateDisabled prop accepting a function to disable some dates. For MonthPicker the accepted prop is isMonthDisabled, and YearPicker is isYearDisabled.
View code
Disabling months and years
You can specify isMonthDisabled and isYearDisabled to disable some months and years, usually when no dates or months can be selected in that period.
View code
onChange vs onSelect
As the name of the callback suggests, onChange is only called when the value changes. On the other hand, onSelect is triggered whenever an option is selected. This callback can be helpful to create select again to deselect behaviour.
View code
More customizations
Managing states
In DatePicker, there are five core states that you can control or initialize with a value: value, inputValue, date, mode, isOpen.
Below is an example of controlling everything except isOpen (because the popup covers up the description). Note that it feels like it freezes, but it simply is because the states always use those fixed values and change handlers are ignored.
View code
The right combination of controlled and uncontrolled will help you a lot achieving almost any use cases and keeping your code maintainable.
Controlling states from external components
You can also use external components (e.g. Button) to control the states from outside.
View code
Customizing DatePicker input
You can pass any TextField prop to the input.
Why doesn’t Coral just reexpose TextField’s fullWidth prop to DatePicker? The reason is to ensure DatePicker is still free from individual components APIs (e.g. DatePickerInput) because the components themselves are customizable and replacable.
View code
Customizing DatePicker popup and calendar
Popup placement
View code
Popup contents
You can literally render anything inside of the popup - Coral doesn’t restrict to addons, header, or footer. Just render anything, but don’t forget to add DatePickerCalendar too.
View code
You can use DatePickerPreset to render quick actions in the popup too.
View code
Accessibility
Integration of Balloon and Calendar components keyboard handlings. Pressing Arrow Down will open the popup and autofocus on the selected value if any.
Relevant components
References
- WAI-ARIA: https://www.w3.org/WAI/ARIA/apg/example-index/dialog-modal/datepicker-dialog.html
- Ant Design: https://ant.design/components/date-picker/
- Material-UI: https://material-ui-pickers.dev/demo/datepicker
- Airbnb React Dates: http://airbnb.io/react-dates/?path=/story/daterangepicker-drp—default
API
DatePicker
| Prop name | Type | Default | Description |
|---|---|---|---|
| clearInvalidInputOnBlur | boolean | true | Set to true to automatically clear input when the whole component is blurred. |
| date | Dayjs | Controlled current calendar date, month, or year. This prop is also used to manage focus when using keyboard arrow navigation. | |
| dateFormat | string | YYYY/MM/DD | Dayjs format to display from selected date, and parse input to autoselect date when the parse is valid. |
| disabled | boolean | ||
| displayDate | (value: Dayjs) => string | (value: Dayjs | null) => (value ? value.format(dateFormat) : '') | Callback to convert value to inputValue |
| initialDate | Dayjs | Uncontrolled current calendar date, month, or year. This prop's default depends on value initialized. | |
| initialInputValue | string | Uncontrolled input value. In this component, normally you would want to use controlled inputValue instead. | |
| initialIsOpen | boolean | Uncontrolled of popup open state. | |
| initialMode | CalendarModes | date | Uncontrolled calendar mode. |
| initialValue | Dayjs | Uncontrolled selected date. In this component, normally you would want to use controlled value instead. | |
| inputElement | ReactElement<any, any> | <DatePickerInput /> | Customizing input. Normally, how you use this prop is passing DatePickerInput with some additional props. |
| inputValue | string | Controlled input value. You can think of this prop as text representation of value using dateFormat. | |
| isDateDisabled | (date: Dayjs) => boolean | () => false | Whether a certain date cannot be selected. This prop is not only used to disable dates on the calendar, but also for input not to trigger selection when input is a valid date but disabled. |
| isMonthDisabled | (date: Dayjs) => boolean | () => false | Disable input, date selection, and opening popup. |
| isOpen | boolean | Controlled of popup open state. | |
| isYearDisabled | (date: Dayjs) => boolean | () => false | |
| mode | CalendarModes | Controlled calendar mode. | |
| onChange | (value: Dayjs) => void | Callback when selected date changes. Note that this is different from onSelect because onChange is not triggered when the currently selected date is selected. | |
| onDateChange | (date: Dayjs) => void | Callback when current calendar date changes.Generally, this prop is triggered when: (1) Navigating calendar using arrow next/previous month, year, or decade. (2) Keyboard date navigation. (3) Input changes that's valid. (4) Opening the popup. | |
| onInputChange | (inputValue: string) => void | Callback when input value changes.Generally, it's triggered by: (1) Typing on the input. (2) Blur or clicking away from input, which will reset to selected value. (3) A date is selected. | |
| onIsOpenChange | (isOpen: boolean) => void | Callback when popup open state changes.The event that triggers opening the popup is the same as Balloon component's - either click or keyboard arrow down. Closing is triggered when a date is selected. | |
| onModeChange | (mode: CalendarModes) => void | Callback when calendar mode changes. | |
| onSelect | (value: Dayjs) => void | Callback when a date is selected. Note that this is different from onChange because onSelect is triggered even when the currently selected date is selected again. | |
| parseDate | (inputValue: string) => Dayjs | (value: string) => dayjs(value, dateFormat, true) | Callback to convert inputValue to value |
| popupElement | ReactElement<any, any> | <DatePickerPopup /> | Customizing popup. Normally, how you use this prop is passing DatePickerPopup with some additional props. |
| today | Dayjs | dayjs() | Can be used to customize current day. Helpful for testing to keep the result consistent. |
| value | Dayjs | Controlled selected date. Pass null to indicate no date is selected, but still controlled. |
DatePickerActions
| Prop name | Type | Default | Description |
|---|---|---|---|
| as | any | Tag or component, but a simple tag (i.e. built-in components, e.g. div, span) is recommended. | |
| height | number |
DatePickerCalendar
| Prop name | Type | Default | Description |
|---|---|---|---|
| as | any | Tag or component, but a simple tag (i.e. built-in components, e.g. div, span) is recommended. | |
| date | Dayjs | ||
| dateFooter | ReactNode | ||
| dateHeader | ReactNode | ||
| dateViewProps | ViewProps | ||
| immediate | boolean | ||
| initialDate | Dayjs | ||
| initialMode | CalendarModes | ||
| mode | CalendarModes | ||
| monthFooter | ReactNode | ||
| monthHeader | ReactNode | ||
| monthViewProps | ViewProps | ||
| onDateChange | (date: Dayjs) => void | ||
| onModeChange | (mode: CalendarModes) => void | ||
| onPreviousModeChange | (mode: CalendarModes) => void | ||
| previousMode | CalendarModes | ||
| renderDate | (props: RenderCalendarDateOptions, defaultCell: ReactElement<CalendarDateCellProps, any>) => ReactNode | (props: RenderCalendarDateOptions) => <DatePickerDateCell {...props} /> | |
| renderDay | (props: RenderDayOptions, defaultCell: ReactElement<RenderDayOptions, any>) => ReactNode | ||
| renderMonth | (props: RenderCalendarMonthOptions, defaultCell: ReactElement<CalendarMonthCellProps, any>) => ReactNode | (props: RenderCalendarMonthOptions) => <DatePickerMonthCell {...props} /> | |
| renderYear | (props: RenderCalendarYearOptions, defaultCell: ReactElement<CalendarYearCellProps, any>) => ReactNode | (props: RenderCalendarYearOptions) => <DatePickerYearCell {...props} /> | |
| startOfWeek | Day | Accepts numbers from 0 (Sunday) to 6 (Saturday). | |
| today | Dayjs | ||
| yearFooter | ReactNode | ||
| yearHeader | ReactNode | ||
| yearViewProps | ViewProps |
DatePickerDateCell
| Prop name | Type | Default | Description |
|---|---|---|---|
| as | any | Tag or component, but a simple tag (i.e. built-in components, e.g. div, span) is recommended. | |
| autoFocus | boolean | ||
| closeOnClick | boolean | true | |
| date | Dayjs | ||
| disableGrid | boolean | ||
| disabled | boolean | Equivalent to button's disabled property. | |
| keyboardClickKeys | string[] | ||
| onBlur | FocusEventHandler<HTMLDivElement> | ||
| onClick | MouseEventHandler<HTMLDivElement> | ||
| onGridFocus | () => void | ||
| onKeyDown | KeyboardEventHandler<HTMLDivElement> | ||
| onKeyUp | KeyboardEventHandler<HTMLDivElement> | ||
| onMouseDown | MouseEventHandler<HTMLDivElement> | ||
| onMouseLeave | MouseEventHandler<HTMLDivElement> | ||
| onMouseUp | MouseEventHandler<HTMLDivElement> | ||
| onRelease | EventHandler<SyntheticEvent<HTMLDivElement, Event>> | Callback that's triggered after click i.e. mouseup and keyup of enter or space. | |
| onTouchEnd | TouchEventHandler<HTMLDivElement> | ||
| onTouchStart | TouchEventHandler<HTMLDivElement> | ||
| preventScroll | boolean | ||
| range | Range | ||
| startOfWeek | Day | ||
| today | Dayjs | ||
| type | DateTypes | ||
| variant | CellVariants |
DatePickerFooter
| Prop name | Type | Default | Description |
|---|---|---|---|
| as | any | Tag or component, but a simple tag (i.e. built-in components, e.g. div, span) is recommended. |
DatePickerIcon
| Prop name | Type | Default | Description |
|---|---|---|---|
| as | void | WebTarget | Tag or component, but a simple tag (i.e. built-in components, e.g. div, span) is recommended. | |
| forwardedAs | void | WebTarget | ||
| theme | DefaultTheme |
DatePickerInput
| Prop name | Type | Default | Description |
|---|---|---|---|
| as | any | Tag or component, but a simple tag (i.e. built-in components, e.g. div, span) is recommended. | |
| autoComplete | "on" | "off" | "nope" | ||
| autoformat | boolean | ||
| clearable | boolean | ||
| defaultValue | string | @deprecated use initialValue | |
| disabled | boolean | ||
| fullWidth | boolean | width: 100% is too troublesome to handle with custom css because of the nesting | |
| initialValue | string | ||
| invalid | boolean | ||
| leftElement | ReactNode | ||
| leftElementContainerProps | HTMLAttributes<HTMLDivElement> & { ref?: MutableRefObject<HTMLDivElement>; } | ||
| onChange | (e: ChangeEvent<HTMLInputElement>) => void | ||
| onTextChange | (val: string) => void | ||
| placeholder | ReactNode | ||
| readOnly | boolean | ||
| rightElement | ReactNode | ||
| rightElementContainerProps | HTMLAttributes<HTMLDivElement> & { ref?: MutableRefObject<HTMLDivElement>; } | ||
| type | "number" | "text" | "password" | ||
| value | string | ||
| wrapperProps | WrapperProps |
DatePickerMonthCell
| Prop name | Type | Default | Description |
|---|---|---|---|
| as | any | Tag or component, but a simple tag (i.e. built-in components, e.g. div, span) is recommended. | |
| autoFocus | boolean | ||
| disableDateMode | boolean | ||
| disableGrid | boolean | ||
| disabled | boolean | Equivalent to button's disabled property. | |
| keyboardClickKeys | string[] | ||
| month | Dayjs | ||
| onBlur | FocusEventHandler<HTMLDivElement> | ||
| onClick | MouseEventHandler<HTMLDivElement> | ||
| onGridFocus | () => void | ||
| onKeyDown | KeyboardEventHandler<HTMLDivElement> | ||
| onKeyUp | KeyboardEventHandler<HTMLDivElement> | ||
| onMouseDown | MouseEventHandler<HTMLDivElement> | ||
| onMouseLeave | MouseEventHandler<HTMLDivElement> | ||
| onMouseUp | MouseEventHandler<HTMLDivElement> | ||
| onRelease | EventHandler<SyntheticEvent<HTMLDivElement, Event>> | Callback that's triggered after click i.e. mouseup and keyup of enter or space. | |
| onTouchEnd | TouchEventHandler<HTMLDivElement> | ||
| onTouchStart | TouchEventHandler<HTMLDivElement> | ||
| preventScroll | boolean | ||
| range | Range | ||
| today | Dayjs | ||
| variant | CellVariants |
DatePickerPopup
| Prop name | Type | Default | Description |
|---|---|---|---|
| arrow | ArrowProps | ||
| as | any | Tag or component, but a simple tag (i.e. built-in components, e.g. div, span) is recommended. | |
| container | HTMLElement | ||
| focusOnOpen | boolean | ||
| immediate | boolean | ||
| offset | [number, number] | [0, 1] | |
| onComponentBlur | () => void | Callback function that will be called when the whole Balloon component is blurred. | |
| placement | Placements | bottom-start | |
| popperOptions | PopperPopperOptions | Options for floating.ui instance | |
| popperUpdateKey | string | ||
| shouldKeyDownReturn | (e: KeyboardEvent<HTMLDivElement>) => boolean | By default when the focus is within the balloon content, press any keys other than esc will move the focus back to the trigger element. Use this prop if you want to change this behavior, the boolean returned from this function will decide if the key down event should return the focus to trigger element. | |
| springConfig | Partial<AnimationConfig> |
DatePickerPreset
| Prop name | Type | Default | Description |
|---|---|---|---|
| as | any | Tag or component, but a simple tag (i.e. built-in components, e.g. div, span) is recommended. | |
| closeOnClick | boolean | ||
| colorType | ColorTypes | neuBg2nd | Set color based on theme. If color is specified, that prop is used instead of this. |
| date | Dayjs | ||
| disabled | boolean | Equivalent to button's disabled property. | |
| keyboardClickKeys | string[] | ||
| leftIcon | ReactNode | Element before the label. Equivalent to element on the label with some margin. | |
| loading | boolean | ||
| onBlur | FocusEventHandler<HTMLDivElement> | ||
| onClick | MouseEventHandler<HTMLDivElement> | ||
| onKeyDown | KeyboardEventHandler<HTMLDivElement> | ||
| onKeyUp | KeyboardEventHandler<HTMLDivElement> | ||
| onMouseDown | MouseEventHandler<HTMLDivElement> | ||
| onMouseLeave | MouseEventHandler<HTMLDivElement> | ||
| onMouseUp | MouseEventHandler<HTMLDivElement> | ||
| onRelease | EventHandler<SyntheticEvent<HTMLDivElement, Event>> | Callback that's triggered after click i.e. mouseup and keyup of enter or space. | |
| onTouchEnd | TouchEventHandler<HTMLDivElement> | ||
| onTouchStart | TouchEventHandler<HTMLDivElement> | ||
| radius | number | ||
| rightIcon | ReactNode | Element after the label. Equivalent to element on the label with some margin. | |
| size | ButtonSizes | ||
| variant | ButtonVariants | Prefers naming it as variant because type is a known button html property. |
DatePickerYearCell
| Prop name | Type | Default | Description |
|---|---|---|---|
| as | any | Tag or component, but a simple tag (i.e. built-in components, e.g. div, span) is recommended. | |
| autoFocus | boolean | ||
| disableGrid | boolean | ||
| disabled | boolean | Equivalent to button's disabled property. | |
| keyboardClickKeys | string[] | ||
| onBlur | FocusEventHandler<HTMLDivElement> | ||
| onClick | MouseEventHandler<HTMLDivElement> | ||
| onGridFocus | () => void | ||
| onKeyDown | KeyboardEventHandler<HTMLDivElement> | ||
| onKeyUp | KeyboardEventHandler<HTMLDivElement> | ||
| onMouseDown | MouseEventHandler<HTMLDivElement> | ||
| onMouseLeave | MouseEventHandler<HTMLDivElement> | ||
| onMouseUp | MouseEventHandler<HTMLDivElement> | ||
| onRelease | EventHandler<SyntheticEvent<HTMLDivElement, Event>> | Callback that's triggered after click i.e. mouseup and keyup of enter or space. | |
| onTouchEnd | TouchEventHandler<HTMLDivElement> | ||
| onTouchStart | TouchEventHandler<HTMLDivElement> | ||
| preventScroll | boolean | ||
| range | Range | ||
| today | Dayjs | ||
| type | YearTypes | ||
| variant | CellVariants | ||
| year | Dayjs |
MonthPicker
| Prop name | Type | Default | Description |
|---|---|---|---|
| clearInvalidInputOnBlur | boolean | Set to true to automatically clear input when the whole component is blurred. | |
| date | Dayjs | Controlled current calendar date, month, or year. This prop is also used to manage focus when using keyboard arrow navigation. | |
| dateFormat | string | YYYY/MM | Dayjs format to display from selected date, and parse input to autoselect date when the parse is valid. |
| disabled | boolean | ||
| displayDate | (value: Dayjs) => string | Callback to convert value to inputValue | |
| initialDate | Dayjs | Uncontrolled current calendar date, month, or year. This prop's default depends on value initialized. | |
| initialInputValue | string | Uncontrolled input value. In this component, normally you would want to use controlled inputValue instead. | |
| initialIsOpen | boolean | Uncontrolled of popup open state. | |
| initialMode | CalendarModes | month | Uncontrolled calendar mode. |
| initialValue | Dayjs | Uncontrolled selected date. In this component, normally you would want to use controlled value instead. | |
| inputElement | ReactElement<any, any> | Customizing input. Normally, how you use this prop is passing DatePickerInput with some additional props. | |
| inputValue | string | Controlled input value. You can think of this prop as text representation of value using dateFormat. | |
| isMonthDisabled | (month: Dayjs) => boolean | () => false | Disable input, date selection, and opening popup. |
| isOpen | boolean | Controlled of popup open state. | |
| isYearDisabled | (date: Dayjs) => boolean | () => false | |
| mode | "month" | "year" | Controlled calendar mode. | |
| onChange | (value: Dayjs) => void | Callback when selected date changes. Note that this is different from onSelect because onChange is not triggered when the currently selected date is selected. | |
| onDateChange | (date: Dayjs) => void | Callback when current calendar date changes.Generally, this prop is triggered when: (1) Navigating calendar using arrow next/previous month, year, or decade. (2) Keyboard date navigation. (3) Input changes that's valid. (4) Opening the popup. | |
| onInputChange | (inputValue: string) => void | Callback when input value changes.Generally, it's triggered by: (1) Typing on the input. (2) Blur or clicking away from input, which will reset to selected value. (3) A date is selected. | |
| onIsOpenChange | (isOpen: boolean) => void | Callback when popup open state changes.The event that triggers opening the popup is the same as Balloon component's - either click or keyboard arrow down. Closing is triggered when a date is selected. | |
| onModeChange | (mode: CalendarModes) => void | Callback when calendar mode changes. | |
| onSelect | (value: Dayjs) => void | Callback when a date is selected. Note that this is different from onChange because onSelect is triggered even when the currently selected date is selected again. | |
| parseDate | (inputValue: string) => Dayjs | Callback to convert inputValue to value | |
| popupElement | ReactElement<any, any> | <MonthPickerPopup /> | Customizing popup. Normally, how you use this prop is passing DatePickerPopup with some additional props. |
| today | Dayjs | Can be used to customize current day. Helpful for testing to keep the result consistent. | |
| value | Dayjs | Controlled selected date. Pass null to indicate no date is selected, but still controlled. |
MonthPickerCalendar
| Prop name | Type | Default | Description |
|---|---|---|---|
| as | any | Tag or component, but a simple tag (i.e. built-in components, e.g. div, span) is recommended. | |
| date | Dayjs | ||
| dateFooter | ReactNode | ||
| dateViewProps | ViewProps | ||
| immediate | boolean | ||
| initialDate | Dayjs | ||
| initialMode | CalendarModes | ||
| mode | CalendarModes | ||
| monthFooter | ReactNode | ||
| monthHeader | ReactNode | ||
| monthViewProps | ViewProps | ||
| onDateChange | (date: Dayjs) => void | ||
| onModeChange | (mode: CalendarModes) => void | ||
| onPreviousModeChange | (mode: CalendarModes) => void | ||
| previousMode | CalendarModes | ||
| renderMonth | (props: RenderCalendarMonthOptions, defaultCell: ReactElement<CalendarMonthCellProps, any>) => ReactNode | (props: RenderCalendarMonthOptions) => <MonthPickerMonthCell {...props} /> | |
| renderYear | (props: RenderCalendarYearOptions, defaultCell: ReactElement<CalendarYearCellProps, any>) => ReactNode | ||
| startOfWeek | Day | Accepts numbers from 0 (Sunday) to 6 (Saturday). | |
| today | Dayjs | ||
| yearFooter | ReactNode | ||
| yearHeader | ReactNode | ||
| yearViewProps | ViewProps |
MonthPickerMonthCell
| Prop name | Type | Default | Description |
|---|---|---|---|
| as | any | Tag or component, but a simple tag (i.e. built-in components, e.g. div, span) is recommended. | |
| autoFocus | boolean | ||
| closeOnClick | boolean | true | |
| disableDateMode | boolean | ||
| disableGrid | boolean | ||
| disabled | boolean | Equivalent to button's disabled property. | |
| keyboardClickKeys | string[] | ||
| month | Dayjs | ||
| onBlur | FocusEventHandler<HTMLDivElement> | ||
| onClick | MouseEventHandler<HTMLDivElement> | ||
| onGridFocus | () => void | ||
| onKeyDown | KeyboardEventHandler<HTMLDivElement> | ||
| onKeyUp | KeyboardEventHandler<HTMLDivElement> | ||
| onMouseDown | MouseEventHandler<HTMLDivElement> | ||
| onMouseLeave | MouseEventHandler<HTMLDivElement> | ||
| onMouseUp | MouseEventHandler<HTMLDivElement> | ||
| onRelease | EventHandler<SyntheticEvent<HTMLDivElement, Event>> | Callback that's triggered after click i.e. mouseup and keyup of enter or space. | |
| onTouchEnd | TouchEventHandler<HTMLDivElement> | ||
| onTouchStart | TouchEventHandler<HTMLDivElement> | ||
| preventScroll | boolean | ||
| range | Range | ||
| today | Dayjs | ||
| variant | CellVariants |
MonthPickerPopup
| Prop name | Type | Default | Description |
|---|---|---|---|
| arrow | ArrowProps | ||
| as | any | Tag or component, but a simple tag (i.e. built-in components, e.g. div, span) is recommended. | |
| container | HTMLElement | ||
| focusOnOpen | boolean | ||
| immediate | boolean | ||
| offset | [number, number] | ||
| onComponentBlur | () => void | Callback function that will be called when the whole Balloon component is blurred. | |
| placement | Placements | ||
| popperOptions | PopperPopperOptions | Options for floating.ui instance | |
| popperUpdateKey | string | ||
| shouldKeyDownReturn | (e: KeyboardEvent<HTMLDivElement>) => boolean | By default when the focus is within the balloon content, press any keys other than esc will move the focus back to the trigger element. Use this prop if you want to change this behavior, the boolean returned from this function will decide if the key down event should return the focus to trigger element. | |
| springConfig | Partial<AnimationConfig> |
YearPicker
| Prop name | Type | Default | Description |
|---|---|---|---|
| clearInvalidInputOnBlur | boolean | Set to true to automatically clear input when the whole component is blurred. | |
| date | Dayjs | Controlled current calendar date, month, or year. This prop is also used to manage focus when using keyboard arrow navigation. | |
| dateFormat | string | YYYY | Dayjs format to display from selected date, and parse input to autoselect date when the parse is valid. |
| disabled | boolean | ||
| displayDate | (value: Dayjs) => string | Callback to convert value to inputValue | |
| initialDate | Dayjs | Uncontrolled current calendar date, month, or year. This prop's default depends on value initialized. | |
| initialInputValue | string | Uncontrolled input value. In this component, normally you would want to use controlled inputValue instead. | |
| initialIsOpen | boolean | Uncontrolled of popup open state. | |
| initialValue | Dayjs | Uncontrolled selected date. In this component, normally you would want to use controlled value instead. | |
| inputElement | ReactElement<any, any> | Customizing input. Normally, how you use this prop is passing DatePickerInput with some additional props. | |
| inputValue | string | Controlled input value. You can think of this prop as text representation of value using dateFormat. | |
| isMonthDisabled | (date: Dayjs) => boolean | Disable input, date selection, and opening popup. | |
| isOpen | boolean | Controlled of popup open state. | |
| isYearDisabled | (month: Dayjs) => boolean | () => false | |
| onChange | (value: Dayjs) => void | Callback when selected date changes. Note that this is different from onSelect because onChange is not triggered when the currently selected date is selected. | |
| onDateChange | (date: Dayjs) => void | Callback when current calendar date changes.Generally, this prop is triggered when: (1) Navigating calendar using arrow next/previous month, year, or decade. (2) Keyboard date navigation. (3) Input changes that's valid. (4) Opening the popup. | |
| onInputChange | (inputValue: string) => void | Callback when input value changes.Generally, it's triggered by: (1) Typing on the input. (2) Blur or clicking away from input, which will reset to selected value. (3) A date is selected. | |
| onIsOpenChange | (isOpen: boolean) => void | Callback when popup open state changes.The event that triggers opening the popup is the same as Balloon component's - either click or keyboard arrow down. Closing is triggered when a date is selected. | |
| onSelect | (value: Dayjs) => void | Callback when a date is selected. Note that this is different from onChange because onSelect is triggered even when the currently selected date is selected again. | |
| parseDate | (inputValue: string) => Dayjs | Callback to convert inputValue to value | |
| popupElement | ReactElement<any, any> | <YearPickerPopup /> | Customizing popup. Normally, how you use this prop is passing DatePickerPopup with some additional props. |
| today | Dayjs | Can be used to customize current day. Helpful for testing to keep the result consistent. | |
| value | Dayjs | Controlled selected date. Pass null to indicate no date is selected, but still controlled. |
YearPickerCalendar
| Prop name | Type | Default | Description |
|---|---|---|---|
| as | any | Tag or component, but a simple tag (i.e. built-in components, e.g. div, span) is recommended. | |
| date | Dayjs | ||
| dateFooter | ReactNode | ||
| dateViewProps | ViewProps | ||
| immediate | boolean | ||
| initialDate | Dayjs | ||
| initialMode | CalendarModes | ||
| mode | CalendarModes | ||
| monthFooter | ReactNode | ||
| monthViewProps | ViewProps | ||
| onDateChange | (date: Dayjs) => void | ||
| onModeChange | (mode: CalendarModes) => void | ||
| onPreviousModeChange | (mode: CalendarModes) => void | ||
| previousMode | CalendarModes | ||
| renderYear | (props: RenderCalendarYearOptions, defaultCell: ReactElement<CalendarYearCellProps, any>) => ReactNode | (props: RenderCalendarYearOptions) => <YearPickerYearCell {...props} /> | |
| startOfWeek | Day | Accepts numbers from 0 (Sunday) to 6 (Saturday). | |
| today | Dayjs | ||
| yearFooter | ReactNode | ||
| yearHeader | ReactNode | ||
| yearViewProps | ViewProps |
YearPickerPopup
| Prop name | Type | Default | Description |
|---|---|---|---|
| arrow | ArrowProps | ||
| as | any | Tag or component, but a simple tag (i.e. built-in components, e.g. div, span) is recommended. | |
| container | HTMLElement | ||
| focusOnOpen | boolean | ||
| immediate | boolean | ||
| offset | [number, number] | ||
| onComponentBlur | () => void | Callback function that will be called when the whole Balloon component is blurred. | |
| placement | Placements | ||
| popperOptions | PopperPopperOptions | Options for floating.ui instance | |
| popperUpdateKey | string | ||
| shouldKeyDownReturn | (e: KeyboardEvent<HTMLDivElement>) => boolean | By default when the focus is within the balloon content, press any keys other than esc will move the focus back to the trigger element. Use this prop if you want to change this behavior, the boolean returned from this function will decide if the key down event should return the focus to trigger element. | |
| springConfig | Partial<AnimationConfig> |
YearPickerYearCell
| Prop name | Type | Default | Description |
|---|---|---|---|
| as | any | Tag or component, but a simple tag (i.e. built-in components, e.g. div, span) is recommended. | |
| autoFocus | boolean | ||
| closeOnClick | boolean | true | |
| disableGrid | boolean | ||
| disabled | boolean | Equivalent to button's disabled property. | |
| keyboardClickKeys | string[] | ||
| onBlur | FocusEventHandler<HTMLDivElement> | ||
| onClick | MouseEventHandler<HTMLDivElement> | ||
| onGridFocus | () => void | ||
| onKeyDown | KeyboardEventHandler<HTMLDivElement> | ||
| onKeyUp | KeyboardEventHandler<HTMLDivElement> | ||
| onMouseDown | MouseEventHandler<HTMLDivElement> | ||
| onMouseLeave | MouseEventHandler<HTMLDivElement> | ||
| onMouseUp | MouseEventHandler<HTMLDivElement> | ||
| onRelease | EventHandler<SyntheticEvent<HTMLDivElement, Event>> | Callback that's triggered after click i.e. mouseup and keyup of enter or space. | |
| onTouchEnd | TouchEventHandler<HTMLDivElement> | ||
| onTouchStart | TouchEventHandler<HTMLDivElement> | ||
| preventScroll | boolean | ||
| range | Range | ||
| today | Dayjs | ||
| type | YearTypes | ||
| variant | CellVariants | ||
| year | Dayjs |