Range Date Picker

The Range Date picker allows users to select a start and end date from a calendar or by entering dates manually.

React

Is new design vision part implemented using new tokens?

Up to date

Resources

Example

Storybook failed to load. Please connect to the VPN to access.

                                                        
                                                        
                                                            import { RangeDatePicker, CalendarService } from '@optimus-web/core';
                                                        
                                                        <RangeDatePicker
                                                            startDate={CalendarService.getDateFromDateString('01/03/2023')}
                                                            endDate={CalendarService.getDateFromDateString('01/06/2023')}
                                                            month={CalendarService.getMonthOfDate(
                                                                CalendarService.getDateFromDateString('01/01/2023')
                                                            )}
                                                            getCalendarService={() => CalendarService<D, M, Y>}
                                                            numberOfMonths='2'
                                                            
                                                        />
                                                        
                                                            

API

Name

Type

Default

Description

getCalendarService

() => CalendarService<D, M, Y>

 

This function is expected to return an instance of CalendarService, which is presumably used to calculate dates and handle other calendar-related logic

onDateClick

(date: D, selecting: RangeSelection) => void;

noop

This is a function that will be called when a date is clicked. It receives the clicked date as a parameter

onDateMouseOver

({ startDate, endDate }: DateMouseOverArgs<D>) => void

noop

This is a function that will be called when the mouse hovers over a date. It receives the hovered date as a parameter

onRangeChange

(startDate: D, endDate: D) => void

noop

This is a function that will be called when the selected date range changes. It receives the new date range as a parameter

allowDisabledClick?

boolean

 

This property determines whether the user can select disabled dates

allowOneDateRange?

boolean

 

This property allows the selection of a single date as a range

allowOverflowDaySelection?

boolean

 

This property allows the selection of dates outside the current month

areSurroundingDaysOfSingleMonthHidden?

boolean

 

 

endDate?

D

 

This property represents the end date of the selected range. It can be a date object or null

isSingleDaySelectionCircle?

boolean

 

 

modifiers?

Modifiers<D>

 

This property is used to customize the appearance and behavior of individual dates in the calendar

month?

M

 

 

numberOfMonths?

number

 

 

shouldResetOnEarlierStartDate?

boolean

false

 

getMinLengthHighlight?

(startDate: D) => number

 

 

startDate?

D

 

This property represents the start date of the selected range. It can be a date object or null

startDateWithTooltip?

TooltipProps

 

 

maxDate?

D

 

This property represents the maximum selectable date. It can be a date object or null

minDate?

D

 

This property represents the minimum selectable date. It can be a date object or null

leftFooter?

ReactNode

 

 

rightFooter?

ReactNode

 

 

getDateTooltip?

(day: D) => ReactNode | undefined

 

 

selecting

RangeSelection

RangeSelection.Start

 

hoveredEndDate

D | null

null