Range datepicker component build with date-fns.

Since this component doesn't hold the selected days in its state, you have to hold they in your component's state as the user interacts with the calendar.

For this, you can use the following props:

startDate and endDate - to highlight the first and last day's cells to show in the calendar which range has been selected; onDateChange - handler is holding the selected days in its own state;

You can configure the component with config prop. The whole list of the config props you can find below: "Config: calendar configuration" table.

Also, you can set the needed translation for the button in the footer or for the period list. Just use translations prop. The whole list of the translations props you can find below: "RangeTranslations" table.


Range Calendar with predefined period list

Range Calendar only date

Range Calendar without input

Range Calendar one month

Range Calendar without footer

Range Calendar RTL

Range Calendar: Marking day as disabled

Range Calendar: Marking several days as disabled

Range Calendar: Marking days range as disabled

Range Calendar: Marking inner days range as disabled

Props for RangeCalendar componen

startDateDateNo-Range start date (initialDate) to be displayed as selected
endDateDateNo-Range end date (initialDate) to be displayed as selected
onDateChange({ startDate?: Date; endDate?: Date;}) => void;Yes-Event handler when the user select a range.
configConfigNo-An object of range calendar configuration
hasClickedOutsidebooleanNofalseUsed with useClickOutside() hook
isOpenByDefaultbooleanNofalseSet range calendar open by default
setIsOpen() => void;No-Event handler for open/hide range calendar.
translationsRangeTranslationsNo-Translations for all inner element
isRtlbooleanNofalseSet right to left (rtl) view for range calendar

Config: calendar configuration

weekStartsOn0 | 1 | 2 | 3 | 4 | 5 | 6No1Overwrites the first day of the week.
monthLabelFormatstringNoMMMMSets formatted month label according to the pattern
yearLabelFormatstringNoyyyySets formatted year label according to the pattern
withHoursAndMinutesbooleanNotrueSets possibilities to enter time in the inputs
rangesDatesRange[]NoDates array for predefined states: lastMonth, lastWeek, thisWeek, nextMonth etc.
withPeriodListbooleanNofalseShows period list first
withOneMonthbooleanNofalseShows only one month
hideInputsbooleanNofalseHides inputs fields in range calendar
withFooterboolean | { isApplyBtn?: boolean; isCancelBtn?: boolean; isClearBtn?: boolean;}NotrueShows/Hides footer or sets config for buttons
disabledDaysDate | Date[] | DisabledDaysRange: { from?: Date; to?: Date; }No-Day(s) that should appear as disabled
yearsRange{ min?: number; max?: number; }No-Sets possible choosing years range


applystring | JSX.ElementNoApplyapply button
resetstring | JSX.ElementNoResetreset button
cancelstring | JSX.ElementNoCancelCancel button
lastMonthstring | JSX.ElementNoLast monthperiod list
lastWeekstring | JSX.ElementNoLast weekperiod list
last24hoursstring | JSX.ElementNoLast 24 hoursperiod list
yesterdaystring | JSX.ElementNoYesterdayperiod list
todaystring | JSX.ElementNoTodayperiod list
tomorrowstring | JSX.ElementNoTomorrowperiod list
thisWeekstring | JSX.ElementNoThis weekperiod list
nextWeekstring | JSX.ElementNoNext weekperiod list
thisMonthstring | JSX.ElementNoThis monthperiod list
nextMonthstring | JSX.ElementNoNext monthperiod list
customstring | JSX.ElementNoCustomperiod list
labelStartDatestring | JSX.ElementNoStart date & time-
labelEndDatestring | JSX.ElementNoEnd date & time-