diff --git a/src/components/DatePicker/RangeDatePicker.jsx b/src/components/DatePicker/RangeDatePicker.jsx
index 0c1922b8e..e81c8c736 100644
--- a/src/components/DatePicker/RangeDatePicker.jsx
+++ b/src/components/DatePicker/RangeDatePicker.jsx
@@ -27,100 +27,66 @@ const RangeDatePicker = ({
...rest
}) => {
const isStartDateIsTheSameMonth = dayjs(value?.from).isSame(dayjs(value?.to), "month");
+ const isSingleDayDateRange = dayjs(value?.from).isSame(dayjs(value.to), "day");
- const CaptionStartElement =
- shouldShowYearPicker && startMonth
- ? ({ date }) => (
-
- )
+ const createCaptionElement = (currentMonth, handleChange) =>
+ shouldShowYearPicker && currentMonth
+ ? ({ date }) =>
: undefined;
- const CaptionEndElement =
- shouldShowYearPicker && endMonth
- ? ({ date }) =>
- : undefined;
+ const CaptionStartElement = createCaptionElement(startMonth, handleStartMonthChange);
+ const CaptionEndElement = createCaptionElement(endMonth, handleEndMonthChange);
- const isDisabledStartDays = (date) => {
+ const isDateDisabledFromOutside = (date) => {
if (isFunction(disabledDays)) {
- return disabledDays(date) || dayjs(date).isAfter(value.to, "day");
+ return disabledDays(date);
}
if (isArray(disabledDays)) {
- return (
- disabledDays.some((_date) => dayjs(_date).isSame(date, "day")) || dayjs(date).isAfter(value.to, "day")
- );
+ return disabledDays.some((_date) => dayjs(_date).isSame(date, "day"));
}
- return dayjs(date).isAfter(value.to, "day");
+ return false;
};
- const isDisabledEndDays = (date) => {
- if (isStartDateIsTheSameMonth) {
- return true;
- }
+ const isDisabledStartDays = (date) => {
+ const isDateAfterEndDate = dayjs(date).isAfter(value?.to, "day");
- if (isFunction(disabledDays)) {
- return disabledDays(date) || dayjs(date).isBefore(value?.from, "day");
- }
+ return isDateDisabledFromOutside(date);
+ };
- if (isArray(disabledDays)) {
- return (
- disabledDays.some((_date) => dayjs(_date).isSame(date, "day")) ||
- dayjs(date).isBefore(value?.from, "day")
- );
- }
+ const isDisabledEndDays = (date) => {
+ const isDateBeforeStartDate = dayjs(date).isBefore(value?.from, "day");
- return dayjs(date).isBefore(value?.from, "day");
+ return isDateDisabledFromOutside(date) || (isDateBeforeStartDate && !isSingleDayDateRange);
};
- const renderStartDay = (date) => {
+ const renderDay = (date, isDisabledDays, currentMonth) => {
const tooltipContent = getTooltip?.(date);
- const disabled = isDisabledStartDays(date);
+ const disabled = isDisabledDays(date);
+
+ const DayWrapper = tooltipContent ? Tooltip : React.Fragment;
+ const dayWrapperProps = tooltipContent ? { placement: "top", content: tooltipContent } : {};
- return tooltipContent ? (
-
+ return (
+
-
- ) : (
-
+
);
};
- const renderEndDay = (date) => {
- const tooltipContent = getTooltip?.(date);
- const disabled = isDisabledEndDays(date);
+ const renderStartDay = (date) => {
+ return renderDay(date, isDisabledStartDays, startMonth);
+ };
- return tooltipContent ? (
-
-
-
- ) : (
-
- );
+ const renderEndDay = (date) => {
+ return renderDay(date, isDisabledEndDays, endMonth);
};
return (