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
Blogs
All blogsRangePicker
Designer doc
Generally, Coral RangePicker’s behaviour is like a combination of many other picker libraries. Left and right calendars are detached like Ant Design 3. On the other hand, partial selections are allowed just like React Dates and Material-UI’s.
When reversed dates are selected (e.g. start date after end date), the behaviours are also similar to React Dates and Material-UI’s - resetting either dates and doesn’t close the popup. In Ant Design 4, they completely disable selections for end date before start date.
Example
Basic Usage
View code
Note that the value of RangePicker has type of [Dayjs|null, Dayjs|null]. Do not pass a null, an empty array, or array with other types (e.g. ['', '']). Doing so may cause an unexpected error.
Disabling dates and input
View code
Controlling states from external components
You can also use external components (e.g. Button) to control the states from outside.
View code
Using parseDate and displayDate
You can also pass your custom input parsing and display function. For example, this RangePicker will be able to translate ‘Today’, ‘Yesterday’, and ‘Tomorrow’.
View code
Customizing RangePickerPopup
You can put anything inside the popup by providing your own custom popupElement prop. Inside it, you can always use useRangePickerContext to manage enclosing RangePicker state and create your own custom components.
RangePresets
One of provided addons is RangePresets to achieve something similar to Ant Design’s range presets. This component is not baked into the component itself to ensure popup content flexibility and make it tree shakeable when you don’t really use it.
View code
Custom children
You can also render anything else inside the popup.
View code
Customizing RangePickerInput
Clearable
View code
Disable individual
To achieve similar behaviour like in Ant Design disabled individual input, you can override inputStart or inputEnd prop inside RangePickerInputChildren and disable it. Don’t forget to disable dates and control currentInput prop to avoid broken states.
View code
Customizing RangePicker cells
View code
You can also pass in startOfWeek prop to RangePickerCalendarLeft and RangePickerCalendarRight to control which day to show as the start of the week. By default, Sunday will be shown as the first day.
View code
Accessibility
Similar to DatePicker and Calendar, you can navigate the dates using keyboard Arrow Left, Right, Top, and Down. This navigation will also focus the cell and highlight range accordingly.
Relevant components
References
- Airbnb React Dates: http://airbnb.io/react-dates/?path=/story/daterangepicker-drp—default
- Material-UI Date Range Picker (Alpha): https://next.material-ui-pickers.dev/demo/daterangepicker
- Ant Design 4: https://ant.design/components/date-picker/#components-date-picker-demo-range-picker
- Ant Design 3: https://3x.ant.design/components/date-picker/
API
MonthRangePicker
| Prop name | Type | Default | Description |
|---|---|---|---|
| closePopupOnSelect | boolean | ||
| currentInput | RangeInputs | ||
| date | RangeDate | ||
| dateFormat | string | YYYY/MM | |
| disabled | boolean | ||
| displayDate | (dateValue: Dayjs) => string | ||
| highlight | RangeDate | ||
| initialCurrentInput | RangeInputs | ||
| initialDate | RangeDate | ||
| initialHighlight | RangeDate | ||
| initialIsOpen | boolean | ||
| initialMode | RangeMode | [CalendarModes.Month, CalendarModes.Month] | |
| initialValue | RangeDate | [null, null] | |
| inputElement | ReactElement<any, string | JSXElementConstructor<any>> | ||
| inputValue | RangeInputValue | ||
| isDateDisabled | (date: Dayjs, input: RangeInputs) => boolean | ||
| isOpen | boolean | ||
| mode | RangeMode | ||
| normalizeDate | (dt: RangeDate) => RangeDate | ||
| onChange | (value: RangeDate) => void | ||
| onCurrentInputChange | (currentInput: RangeInputs) => void | ||
| onDateChange | (date: RangeDate) => void | ||
| onHighlightChange | (highlight: RangeDate) => void | ||
| onInputChange | (inputValue: RangeInputValue) => void | ||
| onIsOpenChange | (isOpen: boolean) => void | ||
| onModeChange | (mode: RangeMode) => void | ||
| onSelect | (value: RangeDate) => void | ||
| parseDate | (dateInputValue: string) => Dayjs | ||
| popupElement | ReactElement<any, string | JSXElementConstructor<any>> | ( <RangePickerPopup> <RangePickerPopupChildren calendarLeft={<MonthRangePickerCalendarLeft />} calendarRight={<MonthRangePickerCalendarRight />} /> </RangePickerPopup> ) | |
| today | Dayjs | dayjs() | |
| value | RangeDate |
RangePicker
| Prop name | Type | Default | Description |
|---|---|---|---|
| closePopupOnSelect | boolean | true | |
| currentInput | RangeInputs | ||
| date | RangeDate | ||
| dateFormat | string | YYYY/MM/DD | |
| disabled | boolean | ||
| displayDate | (dateValue: Dayjs) => string | (value: Dayjs | null) => (value ? value.format(dateFormat) : '') | |
| highlight | RangeDate | ||
| initialCurrentInput | RangeInputs | start | |
| initialDate | RangeDate | ||
| initialHighlight | RangeDate | ||
| initialIsOpen | boolean | ||
| initialMode | RangeMode | [CalendarModes.Date, CalendarModes.Date] | |
| initialValue | RangeDate | [null, null] | |
| inputElement | ReactElement<any, string | JSXElementConstructor<any>> | <RangePickerInput /> | |
| inputValue | RangeInputValue | ||
| isDateDisabled | (date: Dayjs, input: RangeInputs) => boolean | () => false | |
| isOpen | boolean | ||
| mode | RangeMode | ||
| normalizeDate | (dt: RangeDate) => RangeDate | ||
| onChange | (value: RangeDate) => void | ||
| onCurrentInputChange | (currentInput: RangeInputs) => void | ||
| onDateChange | (date: RangeDate) => void | ||
| onHighlightChange | (highlight: RangeDate) => void | ||
| onInputChange | (inputValue: RangeInputValue) => void | ||
| onIsOpenChange | (isOpen: boolean) => void | ||
| onModeChange | (mode: RangeMode) => void | ||
| onSelect | (value: RangeDate) => void | ||
| parseDate | (dateInputValue: string) => Dayjs | (value: string) => dayjs(value, dateFormat) | |
| popupElement | ReactElement<any, string | JSXElementConstructor<any>> | <RangePickerPopup /> | |
| today | Dayjs | dayjs() | |
| value | RangeDate |
RangePickerPopup
| Prop name | Type | Default | Description |
|---|---|---|---|
| calendarLeft | ReactNode | <RangePickerCalendarLeft /> | |
| calendarRight | ReactNode | <RangePickerCalendarRight /> |
MonthRangePickerCalendar
| 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 | ||
| renderDay | (props: RenderDayOptions, defaultCell: ReactElement<RenderDayOptions, any>) => ReactNode | ||
| renderMonth | (props: RenderCalendarMonthOptions, defaultCell: ReactElement<CalendarMonthCellProps, any>) => ReactNode | (props: RenderCalendarMonthOptions) => <RangePickerMonthCell {...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 |
MonthRangePickerCalendarLeft
| 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 | ||
| renderDay | (props: RenderDayOptions, defaultCell: ReactElement<RenderDayOptions, any>) => ReactNode | ||
| renderMonth | (props: RenderCalendarMonthOptions, defaultCell: ReactElement<CalendarMonthCellProps, any>) => ReactNode | ||
| renderYear | (props: RenderCalendarYearOptions, defaultCell: ReactElement<CalendarYearCellProps, any>) => ReactNode | (props: RenderMonthRangePickerYearOptions) => <RangePickerYearCellLeft {...props} /> | |
| startOfWeek | Day | Accepts numbers from 0 (Sunday) to 6 (Saturday). | |
| today | Dayjs | ||
| yearFooter | ReactNode | ||
| yearHeader | ReactNode | ||
| yearViewProps | ViewProps |
MonthRangePickerCalendarRight
| 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 | ||
| renderDay | (props: RenderDayOptions, defaultCell: ReactElement<RenderDayOptions, any>) => ReactNode | ||
| renderMonth | (props: RenderCalendarMonthOptions, defaultCell: ReactElement<CalendarMonthCellProps, any>) => ReactNode | ||
| renderYear | (props: RenderCalendarYearOptions, defaultCell: ReactElement<CalendarYearCellProps, any>) => ReactNode | (props: RenderMonthRangePickerYearOptions) => <RangePickerYearCellRight {...props} /> | |
| startOfWeek | Day | Accepts numbers from 0 (Sunday) to 6 (Saturday). | |
| today | Dayjs | ||
| yearFooter | ReactNode | ||
| yearHeader | ReactNode | ||
| yearViewProps | ViewProps |
RangePickerCalendarLeft
| 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 | ||
| renderDay | (props: RenderDayOptions, defaultCell: ReactElement<RenderDayOptions, any>) => ReactNode | ||
| renderMonth | (props: RenderCalendarMonthOptions, defaultCell: ReactElement<CalendarMonthCellProps, any>) => ReactNode | (props: RenderRangePickerMonthOptions) => <RangePickerMonthCellLeft {...props} /> | |
| renderYear | (props: RenderCalendarYearOptions, defaultCell: ReactElement<CalendarYearCellProps, any>) => ReactNode | (props: RenderRangePickerYearOptions) => <RangePickerYearCellLeft {...props} /> | |
| startOfWeek | Day | Accepts numbers from 0 (Sunday) to 6 (Saturday). | |
| today | Dayjs | ||
| yearFooter | ReactNode | ||
| yearHeader | ReactNode | ||
| yearViewProps | ViewProps |
RangePickerCalendarRight
| 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 | ||
| renderDay | (props: RenderDayOptions, defaultCell: ReactElement<RenderDayOptions, any>) => ReactNode | ||
| renderMonth | (props: RenderCalendarMonthOptions, defaultCell: ReactElement<CalendarMonthCellProps, any>) => ReactNode | (props: RenderRangePickerMonthOptions) => <RangePickerMonthCellRight {...props} /> | |
| renderYear | (props: RenderCalendarYearOptions, defaultCell: ReactElement<CalendarYearCellProps, any>) => ReactNode | (props: RenderRangePickerYearOptions) => <RangePickerYearCellRight {...props} /> | |
| startOfWeek | Day | Accepts numbers from 0 (Sunday) to 6 (Saturday). | |
| today | Dayjs | ||
| yearFooter | ReactNode | ||
| yearHeader | ReactNode | ||
| yearViewProps | ViewProps |
RangePickerIcon
| 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. | |
| clearable | boolean | ||
| colorType | ColorTypes | Set color based on theme. If color is specified, that prop is used instead of this. | |
| disabled | boolean | Equivalent to button's disabled property. | |
| keyboardClickKeys | string[] | ||
| 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 | string | ||
| size | IconButtonSizes | ||
| tooltip | ReactNode | ||
| tooltipProps | Omit<TooltipProps, "title" | "children"> | ||
| variant | IconButtonVariants |
RangePickerInput
| Prop name | Type | Default | Description |
|---|---|---|---|
| dash | ReactNode | <Dash /> | |
| icon | ReactNode | <RangePickerIcon /> | |
| inputEnd | ReactNode | <RangePickerInputEnd /> | |
| inputStart | ReactNode | <RangePickerInputStart /> | |
| underline | ReactNode | <RangePickerInputUnderline /> |
RangePickerInputEnd
| 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. | |
| disabled | boolean | ||
| onChange | (e: ChangeEvent<HTMLInputElement>) => void | ||
| value | string |
RangePickerInputStart
| 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. | |
| disabled | boolean | ||
| onChange | (e: ChangeEvent<HTMLInputElement>) => void | ||
| value | string |
RangePickerInputUnderline
| 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 |
RangePreset
| 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. | |
| colorType | ColorTypes | Set color based on theme. If color is specified, that prop is used instead of this. | |
| 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 | ||
| range | RangeDate | ||
| rightIcon | ReactNode | Element after the label. Equivalent to element on the label with some margin. | |
| setDateDelay | number | 800 | |
| size | ButtonSizes | ||
| variant | ButtonVariants | text | Prefers naming it as variant because type is a known button html property. |
RangePresets
| 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. | |
| corner | boolean | ||
| gap | number | When gap is set to 0, separator will be rendered | |
| ranges | ObjectOf<RangeDate> |