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

Storybook

React guidance

Source

GitHub code

Example


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