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 (