React | Range Date Picker | Made with Supernova

React

Is new design vision part implemented using new tokens?

Up to date

Storybook

React guidance

Source

GitHub code

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'
                                                            
                                                        />

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

Range Date Picker

Resources

Example

API