@dotss/ui 0.0.4

package/components/DatePicker/DatePicker.tsx

@@ -0,0 +1,780 @@
+import type { HTMLAttributes, MouseEvent, TouchEvent } from 'react';
+import { forwardRef, useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
+
+import IconButton from '@components/IconButton';
+import Menu from '@components/Menu';
+import MenuBlock from '@components/Menu/MenuBlock';
+import useTheme from '@core/useTheme';
+import type { GeneralComponentProps } from '@typings/component';
+
+import {
+  DateChanger,
+  Day,
+  StyledDatePicker,
+  Title,
+  TitleBox,
+  WeekBody,
+  WeekContainer,
+  WeekHead,
+  WeekPanel,
+  WeekRow
+} from './DatePicker.styles';
+
+export type DateValue = string | number | Date | null;
+
+export type DatePickerValue = DateValue[] | DateValue;
+
+export type DateFormatter<T> = typeof formatDate<T>;
+
+export interface DatePickerProps
+  extends GeneralComponentProps<Omit<HTMLAttributes<HTMLDivElement>, 'onChange'>> {
+  onChange?: (date: string | string[], dateFormatter: DateFormatter<string>) => void;
+  value?: DatePickerValue;
+  date?: DateValue;
+  minDate?: DateValue;
+  maxDate?: DateValue;
+  holidayDates?: DatePickerValue;
+  disableDates?: DatePickerValue;
+  showWeekHead?: boolean;
+  multiple?: boolean;
+  period?: boolean;
+  enableMonthSelect?: boolean;
+  showToday?: boolean;
+  edgeSpacing?: number;
+}
+
+const WEEK_ROW_HEIGHT = 30;
+
+const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(function DatePicker(
+  {
+    onChange,
+    value,
+    date,
+    minDate,
+    maxDate,
+    holidayDates,
+    disableDates,
+    showWeekHead = false,
+    multiple = false,
+    period = false,
+    enableMonthSelect = false,
+    showToday = false,
+    edgeSpacing = 0,
+    inlineCSS,
+    ...props
+  },
+  ref
+) {
+  const { spacing } = useTheme();
+
+  const [currentDate, setCurrentDate] = useState(
+    (typeof date === 'string' || typeof date === 'number' ? new Date(date) : date) || new Date()
+  );
+  const [startDate, setStartDate] = useState<DateValue | null>(() => {
+    if (Array.isArray(value) && value.length > 0) {
+      return formatDate(value[0]);
+    }
+    return formatDate(value);
+  });
+  const [endDate, setEndDate] = useState<DateValue | null>(() => {
+    if (Array.isArray(value) && value.length > 1) {
+      return formatDate(value[value.length - 1]);
+    }
+    return null;
+  });
+  const [containerWidth, setContainerWidth] = useState(0);
+  const [currentIndex, setCurrentIndex] = useState(1);
+  const [isOnWeekPanelTransformInitTimer, setIsOnWeekPanelTransformInitTimer] = useState(false);
+  const [isOpen, setIsOpen] = useState(false);
+
+  const weekContainerRef = useRef<HTMLDivElement>(null);
+  const weekPanelRef = useRef<HTMLDivElement>(null);
+  const startXRef = useRef(0);
+  const currentXRef = useRef(0);
+  const isSwipingRef = useRef(false);
+  const prevCurrentIndexRef = useRef(currentIndex);
+  const weekPanelTransformInitTimerRef = useRef<ReturnType<typeof setTimeout>>();
+  const titleBoxRef = useRef<HTMLDivElement>(null);
+  const menuRef = useRef<HTMLDivElement>(null);
+
+  const currentYear = currentDate.getFullYear();
+  const currentMonth = currentDate.getMonth();
+  const currentWeeks = initMonthDays(currentYear, currentMonth);
+  const currentDisplayMonth = getDisplayMonth(currentMonth);
+  const currentSelectedDates = formatDate<string | string[]>(value);
+  const currentHolidayDates = formatDate<string | string[]>(holidayDates);
+  const currentDisableDates = formatDate<string | string[]>(disableDates);
+  const isDisabledPrevButton = isBefore(currentDate, minDate) || isSameMonth(currentDate, minDate);
+  const isDisabledNextButton = isAfter(currentDate, maxDate) || isSameMonth(currentDate, maxDate);
+  const prevDate = new Date(currentYear, currentMonth - 1);
+  const nextDate = new Date(currentYear, currentMonth + 1);
+  const title = `${currentYear}. ${currentDisplayMonth}`;
+  const activePeriodMode = period && !!startDate && !!endDate;
+
+  const weekPanelDates = [
+    {
+      year: prevDate.getFullYear(),
+      month: getDisplayMonth(prevDate.getMonth()),
+      weeks: initMonthDays(prevDate.getFullYear(), prevDate.getMonth())
+    },
+    {
+      year: currentYear,
+      month: currentDisplayMonth,
+      weeks: currentWeeks
+    },
+    {
+      year: nextDate.getFullYear(),
+      month: getDisplayMonth(nextDate.getMonth()),
+      weeks: initMonthDays(nextDate.getFullYear(), nextDate.getMonth())
+    }
+  ];
+
+  const maxHeight =
+    weekPanelDates[1].weeks.length * (WEEK_ROW_HEIGHT + spacing.content(2)) + spacing.content(2);
+
+  const startSwipe = (clientX: number) => () => {
+    if (!multiple) return;
+
+    if (weekPanelRef.current) {
+      weekPanelRef.current.style.transition = 'none';
+      weekPanelRef.current.style.cursor = 'grabbing';
+    }
+
+    startXRef.current = clientX;
+
+    isSwipingRef.current = true;
+  };
+
+  const endSwipe = useCallback(() => {
+    if (!isSwipingRef.current) return;
+
+    const endClientX = containerWidth - currentXRef.current;
+    const diff = Math.abs(containerWidth - endClientX);
+    const limitDiff = containerWidth * 0.1;
+
+    if (weekPanelRef.current) {
+      weekPanelRef.current.style.transform = `translate3d(-${containerWidth * currentIndex}px, 0, 0)`;
+      weekPanelRef.current.style.cursor = 'grab';
+      weekPanelRef.current.style.transition = 'transform 0.2s';
+    }
+
+    startXRef.current = 0;
+    currentXRef.current = 0;
+    isSwipingRef.current = false;
+
+    if (diff <= limitDiff) {
+      return;
+    }
+
+    if (containerWidth < endClientX) {
+      setCurrentIndex((prevState) => prevState + 1);
+    } else if (containerWidth > endClientX) {
+      setCurrentIndex((prevState) => prevState - 1);
+    }
+  }, [containerWidth, currentIndex]);
+
+  const handleClick = (newDate: string) => () => {
+    if (isSwipingRef.current || currentIndex !== 1) return;
+
+    if (!period) {
+      onChange?.(newDate, formatDate);
+      return;
+    }
+
+    if (isSame(newDate, startDate) && Array.isArray(value) && value.length === 1) {
+      setStartDate(null);
+      setEndDate(null);
+      onChange?.([], formatDate);
+      return;
+    } else if (isSame(newDate, startDate) && !Array.isArray(value) && isSame(newDate, value)) {
+      setStartDate(null);
+      setEndDate(null);
+      onChange?.([], formatDate);
+      return;
+    }
+
+    if (!startDate) {
+      setStartDate(newDate);
+      onChange?.(newDate, formatDate);
+      return;
+    }
+
+    if (!endDate && startDate) {
+      const [newStartDate, newEndDate] = isAfter(newDate, startDate)
+        ? [startDate, newDate]
+        : [newDate, startDate];
+
+      setStartDate(newStartDate);
+      setEndDate(newEndDate);
+
+      const datesInRange = getDatesInRange([newStartDate, newEndDate], disableDates);
+      onChange?.(datesInRange, formatDate);
+      return;
+    }
+
+    if (startDate && endDate) {
+      setStartDate(newDate);
+      setEndDate(null);
+      onChange?.(newDate, formatDate);
+    }
+  };
+
+  const handleMouseDown = (e: MouseEvent<HTMLDivElement>) => startSwipe(e.clientX)();
+
+  const handleTouchStart = (e: TouchEvent<HTMLDivElement>) => startSwipe(e.touches[0].clientX)();
+
+  const handleClickPrev = () => {
+    if (isOnWeekPanelTransformInitTimer) return;
+
+    if (weekPanelRef.current) {
+      weekPanelRef.current.style.transition = 'transform 0.2s';
+    }
+
+    setCurrentIndex((prevState) => prevState - 1);
+  };
+
+  const handleClickNext = () => {
+    if (isOnWeekPanelTransformInitTimer) return;
+
+    if (weekPanelRef.current) {
+      weekPanelRef.current.style.transition = 'transform 0.2s';
+    }
+
+    setCurrentIndex((prevState) => prevState + 1);
+  };
+
+  const handleOpen = () => setIsOpen((prevState) => !prevState);
+
+  const handleChangeMonth = (value?: string | number) => {
+    if (!value) return;
+
+    const [year, month] = value.toString().split('.').map(Number);
+
+    setCurrentDate(new Date(year, month - 1));
+    setIsOpen(false);
+  };
+
+  useLayoutEffect(() => {
+    setContainerWidth(weekContainerRef.current?.clientWidth || 0);
+  }, [multiple]);
+
+  useEffect(() => {
+    const handleResizeAndScroll = () => {
+      setContainerWidth(weekContainerRef.current?.clientWidth || 0);
+    };
+
+    window.addEventListener('resize', handleResizeAndScroll);
+    window.addEventListener('scroll', handleResizeAndScroll);
+
+    return () => {
+      window.removeEventListener('resize', handleResizeAndScroll);
+      window.removeEventListener('scroll', handleResizeAndScroll);
+    };
+  }, [multiple]);
+
+  useEffect(() => {
+    const weekPanelElement = weekPanelRef.current;
+
+    const moveSwipe = (
+      clientX: number,
+      clientY: number,
+      e: globalThis.TouchEvent | globalThis.MouseEvent
+    ) => {
+      if (!weekPanelElement || !isSwipingRef.current) return;
+
+      currentXRef.current = clientX - startXRef.current;
+      const movedTouchClientY = clientY - startXRef.current;
+      const threshold = 5;
+
+      isSwipingRef.current =
+        isSwipingRef.current ||
+        (Math.abs(currentXRef.current) > threshold && Math.abs(movedTouchClientY) < threshold * 2);
+
+      if (e.cancelable) {
+        e.preventDefault();
+      }
+
+      if (isSwipingRef.current) {
+        if (isDisabledPrevButton && currentXRef.current > 0) {
+          endSwipe();
+          return;
+        }
+
+        if (isDisabledNextButton && currentXRef.current < 0) {
+          endSwipe();
+          return;
+        }
+
+        if (Math.abs(currentXRef.current) >= 10) {
+          weekPanelElement.style.transform = `translate3d(${currentXRef.current - containerWidth * currentIndex}px, 0, 0)`;
+          weekPanelElement.style.cursor = 'grabbing';
+        }
+      }
+    };
+
+    const handleTouchMove = (e: globalThis.TouchEvent) =>
+      moveSwipe(e.touches[0].clientX, e.touches[0].clientY, e);
+
+    const handleMouseMove = (e: globalThis.MouseEvent) => {
+      if (!isSwipingRef.current) return;
+
+      moveSwipe(e.clientX, e.clientY, e);
+    };
+
+    weekPanelElement?.addEventListener('mousemove', handleMouseMove);
+    weekPanelElement?.addEventListener('touchmove', handleTouchMove);
+
+    return () => {
+      weekPanelElement?.removeEventListener('mousemove', handleMouseMove);
+      weekPanelElement?.removeEventListener('touchmove', handleTouchMove);
+    };
+  }, [containerWidth, currentIndex, endSwipe, isDisabledNextButton, isDisabledPrevButton]);
+
+  useEffect(() => {
+    setIsOnWeekPanelTransformInitTimer(true);
+
+    weekPanelTransformInitTimerRef.current = setTimeout(() => {
+      if (weekPanelRef.current) {
+        weekPanelRef.current.style.transition = 'none';
+      }
+
+      if (currentIndex > prevCurrentIndexRef.current) {
+        setCurrentIndex(1);
+        setCurrentDate((prevState) => new Date(prevState.setMonth(prevState.getMonth() + 1)));
+        prevCurrentIndexRef.current = 1;
+      } else if (currentIndex < prevCurrentIndexRef.current) {
+        setCurrentDate((prevState) => new Date(prevState.setMonth(prevState.getMonth() - 1)));
+        setCurrentIndex(1);
+        prevCurrentIndexRef.current = 1;
+      } else {
+        prevCurrentIndexRef.current = currentIndex;
+      }
+
+      setIsOnWeekPanelTransformInitTimer(false);
+    }, 200);
+  }, [currentIndex]);
+
+  useLayoutEffect(() => {
+    if (!period || !Array.isArray(value)) return;
+
+    const datesInRange = getDatesInRange(value, disableDates);
+
+    if (value.length < datesInRange.length) {
+      onChange?.(datesInRange, formatDate);
+    }
+  }, [period, value, onChange, disableDates]);
+
+  useEffect(() => {
+    let timer: ReturnType<typeof setTimeout>;
+
+    if (isOpen) {
+      timer = setTimeout(() => {
+        if (menuRef.current) {
+          const menuListElement = menuRef.current.querySelector('ul');
+          const selectedElement = menuListElement?.querySelector(`[data-value="${title}"]`);
+
+          selectedElement?.scrollIntoView({
+            block: 'start'
+          });
+        }
+      }, 200);
+    }
+
+    return () => {
+      clearTimeout(timer);
+    };
+  }, [isOpen, title]);
+
+  useEffect(() => {
+    return () => {
+      if (weekPanelTransformInitTimerRef.current) {
+        clearTimeout(weekPanelTransformInitTimerRef.current);
+      }
+    };
+  }, []);
+
+  return (
+    <StyledDatePicker ref={ref} {...props} css={inlineCSS}>
+      {multiple ? (
+        <DateChanger>
+          <IconButton
+            name="ChevronLeftLine"
+            size="small"
+            onClick={handleClickPrev}
+            disabled={isDisabledPrevButton}
+          />
+          <TitleBox
+            ref={titleBoxRef}
+            clickable={!!enableMonthSelect}
+            onClick={enableMonthSelect ? handleOpen : undefined}
+          >
+            {title}
+            {enableMonthSelect && <IconButton name="ArrowDownFill" size="xSmall" />}
+          </TitleBox>
+          <IconButton
+            name="ChevronRightLine"
+            size="small"
+            onClick={handleClickNext}
+            disabled={isDisabledNextButton}
+          />
+        </DateChanger>
+      ) : (
+        <Title
+          ref={titleBoxRef}
+          clickable={!!enableMonthSelect}
+          onClick={enableMonthSelect ? handleOpen : undefined}
+        >
+          {title}
+          {enableMonthSelect && <IconButton name="ArrowDownFill" size="xSmall" />}
+        </Title>
+      )}
+      {enableMonthSelect && (
+        <Menu
+          anchorRef={titleBoxRef}
+          ref={menuRef}
+          open={isOpen}
+          onClose={handleOpen}
+          onChange={handleChangeMonth}
+          value={title}
+          placement={multiple ? 'bottom-center' : 'bottom-left'}
+          width={160}
+          fitToAnchorWidth={false}
+          maxHeight={368}
+        >
+          {Array.from({ length: 130 }, (_, index) => {
+            const year = 1970 + index;
+            return Array.from({ length: 12 }, (_, monthIndex) => {
+              const month = monthIndex + 1;
+              const formattedMonth = month < 10 ? `0${month}` : month;
+              const lastDay = new Date(year, monthIndex + 1, 0).getDate();
+              const minCompareDate = `${year}-${formattedMonth}-${lastDay}`;
+              const maxCompareDate = `${year}-${formattedMonth}-01`;
+
+              if (isBefore(minCompareDate, minDate) || isAfter(maxCompareDate, maxDate))
+                return null;
+
+              return (
+                <MenuBlock key={`${year}-${formattedMonth}`} value={`${year}. ${formattedMonth}`}>
+                  {`${year}. ${formattedMonth}`}
+                </MenuBlock>
+              );
+            });
+          })}
+        </Menu>
+      )}
+      {showWeekHead && (
+        <WeekHead edgeSpacing={edgeSpacing}>
+          <span>일</span>
+          <span>월</span>
+          <span>화</span>
+          <span>수</span>
+          <span>목</span>
+          <span>금</span>
+          <span>토</span>
+        </WeekHead>
+      )}
+      <WeekContainer ref={weekContainerRef}>
+        <WeekPanel
+          ref={weekPanelRef}
+          onMouseDown={handleMouseDown}
+          onMouseUp={endSwipe}
+          onMouseLeave={endSwipe}
+          onTouchStart={handleTouchStart}
+          onTouchEnd={endSwipe}
+          onTouchCancel={endSwipe}
+          style={{
+            transform: multiple
+              ? `translate3d(-${containerWidth * currentIndex}px, 0, 0)`
+              : undefined,
+            cursor: multiple ? 'grab' : undefined,
+            maxHeight
+          }}
+        >
+          {multiple &&
+            weekPanelDates.map(({ year: weekPanelYear, month: weekPanelMonth, weeks }) => (
+              <WeekBody
+                key={`week-body-${weekPanelYear}-${weekPanelMonth}`}
+                edgeSpacing={edgeSpacing}
+              >
+                {weeks.map((week, weekIndex) => (
+                  <WeekRow key={`${weekPanelYear}-${weekPanelMonth}-week-row-${String(week)}`}>
+                    {week.map((day, dayIndex) => {
+                      const thisDate = `${weekPanelYear}-${weekPanelMonth}-${getDisplayDay(day || 0)}`;
+                      const isToday = isSame(thisDate, new Date());
+                      const isHoliday = Array.isArray(currentHolidayDates)
+                        ? currentHolidayDates.includes(thisDate)
+                        : currentHolidayDates === thisDate;
+                      const isSelected = Array.isArray(currentSelectedDates)
+                        ? currentSelectedDates.includes(thisDate)
+                        : currentSelectedDates === thisDate;
+                      const isDisabled =
+                        !day ||
+                        (Array.isArray(currentDisableDates)
+                          ? currentDisableDates.includes(thisDate)
+                          : currentDisableDates === thisDate) ||
+                        isAfter(thisDate, maxDate) ||
+                        isBefore(thisDate, minDate);
+                      const isStartDate = activePeriodMode && isSame(thisDate, startDate);
+                      const isEndDate = activePeriodMode && isSame(thisDate, endDate);
+                      const isInRange =
+                        activePeriodMode &&
+                        isAfter(thisDate, startDate) &&
+                        isBefore(thisDate, endDate);
+
+                      return (
+                        <Day
+                          key={`${weekPanelYear}-${weekPanelMonth}-week-row-${dayIndex}-${day ? thisDate : `${weekIndex}-${dayIndex}`}`}
+                          variant={
+                            isStartDate
+                              ? 'start'
+                              : isEndDate
+                                ? 'end'
+                                : isInRange
+                                  ? 'middle'
+                                  : undefined
+                          }
+                          onClick={handleClick(thisDate)}
+                          today={showToday && isToday}
+                          holiday={isHoliday}
+                          selected={isSelected}
+                          disabled={isDisabled}
+                        >
+                          <span>{day}</span>
+                        </Day>
+                      );
+                    })}
+                  </WeekRow>
+                ))}
+              </WeekBody>
+            ))}
+          {!multiple && (
+            <WeekBody edgeSpacing={edgeSpacing}>
+              {currentWeeks.map((week, weekIndex) => (
+                <WeekRow key={`${currentYear}-${currentDisplayMonth}-week-row-${String(week)}`}>
+                  {week.map((day, dayIndex) => {
+                    const thisDate = `${currentYear}-${currentDisplayMonth}-${getDisplayDay(day || 0)}`;
+                    const isToday = isSame(thisDate, new Date());
+                    const isHoliday = Array.isArray(currentHolidayDates)
+                      ? currentHolidayDates.includes(thisDate)
+                      : currentHolidayDates === thisDate;
+                    const isSelected = Array.isArray(currentSelectedDates)
+                      ? currentSelectedDates.includes(thisDate)
+                      : currentSelectedDates === thisDate;
+                    const isDisabled =
+                      !day ||
+                      (Array.isArray(currentDisableDates)
+                        ? currentDisableDates.includes(thisDate)
+                        : currentDisableDates === thisDate) ||
+                      isAfter(thisDate, maxDate) ||
+                      isBefore(thisDate, minDate);
+                    const isStartDate = activePeriodMode && isSame(thisDate, startDate);
+                    const isEndDate = activePeriodMode && isSame(thisDate, endDate);
+                    const isInRange =
+                      activePeriodMode &&
+                      isAfter(thisDate, startDate) &&
+                      isBefore(thisDate, endDate);
+
+                    return (
+                      <Day
+                        key={`${currentYear}-${currentDisplayMonth}-week-row-${week}-${day ? thisDate : `${weekIndex}-${dayIndex}`}`}
+                        variant={
+                          isStartDate
+                            ? 'start'
+                            : isEndDate
+                              ? 'end'
+                              : isInRange
+                                ? 'middle'
+                                : undefined
+                        }
+                        onClick={handleClick(thisDate)}
+                        today={showToday && isToday}
+                        holiday={isHoliday}
+                        selected={isSelected}
+                        disabled={isDisabled}
+                      >
+                        <span>{day}</span>
+                      </Day>
+                    );
+                  })}
+                </WeekRow>
+              ))}
+            </WeekBody>
+          )}
+        </WeekPanel>
+      </WeekContainer>
+    </StyledDatePicker>
+  );
+});
+
+export default DatePicker;
+
+function initMonthDays(year: number, month: number) {
+  let result: (number | null)[][] = [];
+  const date = new Date(year, month, 1);
+  const daysInMonth = new Date(year, month + 1, 0).getDate();
+  const dayOfWeek = date.getDay();
+
+  let week = Array.from({ length: dayOfWeek }).fill(null) as (number | null)[];
+
+  for (let day = 1; day <= daysInMonth; day += 1) {
+    week.push(day);
+
+    if (week.length === 7 || day === daysInMonth) {
+      result.push(week);
+      week = [];
+    }
+  }
+
+  result = result.map((resultWeek) =>
+    Array.from({ length: 7 }).map((_, index) => resultWeek[index] || null)
+  );
+
+  return result;
+}
+
+function getDisplayMonth(month: number) {
+  return String(month + 1).length === 1 ? `0${month + 1}` : month + 1;
+}
+
+function getDisplayDay(day: number) {
+  return String(day).length === 1 ? `0${day}` : day;
+}
+
+function formatDate<T>(value?: DatePickerValue): T {
+  if (Array.isArray(value)) {
+    return value.map((d) => {
+      if (d instanceof Date) {
+        return `${d.getFullYear()}-${getDisplayMonth(d.getMonth())}-${getDisplayDay(d.getDate())}`;
+      }
+      return d;
+    }) as T;
+  }
+
+  if (value instanceof Date) {
+    return `${value.getFullYear()}-${getDisplayMonth(value.getMonth())}-${getDisplayDay(value.getDate())}` as T;
+  }
+
+  if (typeof value === 'number') {
+    const date = new Date(value);
+    return `${date.getFullYear()}-${getDisplayMonth(date.getMonth())}-${getDisplayDay(date.getDate())}` as T;
+  }
+
+  return value as T;
+}
+
+function isAfter(a?: DateValue, b?: DateValue) {
+  if (!a || !b) {
+    return false;
+  }
+
+  const aDate = a instanceof Date ? a : new Date(a);
+  aDate.setHours(0);
+  aDate.setMinutes(0);
+  aDate.setSeconds(0);
+  aDate.setMilliseconds(0);
+  const aTime = aDate.getTime();
+  const bDate = b instanceof Date ? b : new Date(b);
+  bDate.setHours(0);
+  bDate.setMinutes(0);
+  bDate.setSeconds(0);
+  bDate.setMilliseconds(0);
+  const bTime = bDate.getTime();
+
+  return aTime > bTime;
+}
+
+function isBefore(a?: DateValue, b?: DateValue) {
+  if (!a || !b) {
+    return false;
+  }
+
+  const aDate = a instanceof Date ? a : new Date(a);
+  aDate.setHours(0);
+  aDate.setMinutes(0);
+  aDate.setSeconds(0);
+  aDate.setMilliseconds(0);
+  const aTime = aDate.getTime();
+  const bDate = b instanceof Date ? b : new Date(b);
+  bDate.setHours(0);
+  bDate.setMinutes(0);
+  bDate.setSeconds(0);
+  bDate.setMilliseconds(0);
+  const bTime = bDate.getTime();
+
+  return aTime < bTime;
+}
+
+function isSameMonth(a?: DateValue, b?: DateValue) {
+  if (!a || !b) {
+    return false;
+  }
+
+  const aDate = a instanceof Date ? a : new Date(a);
+  const bDate = b instanceof Date ? b : new Date(b);
+
+  return (
+    `${aDate.getFullYear()}-${aDate.getMonth()}` === `${bDate.getFullYear()}-${bDate.getMonth()}`
+  );
+}
+
+function isSame(a?: DateValue, b?: DateValue) {
+  if (!a || !b) {
+    return false;
+  }
+
+  const aDate = a instanceof Date ? a : new Date(a);
+  aDate.setHours(0);
+  aDate.setMinutes(0);
+  aDate.setSeconds(0);
+  aDate.setMilliseconds(0);
+  const aTime = aDate.getTime();
+  const bDate = b instanceof Date ? b : new Date(b);
+  bDate.setHours(0);
+  bDate.setMinutes(0);
+  bDate.setSeconds(0);
+  bDate.setMilliseconds(0);
+  const bTime = bDate.getTime();
+
+  return aTime === bTime;
+}
+
+function getDatesInRange(value?: DatePickerValue, disableDates?: DatePickerValue): string[] {
+  if (!value || !Array.isArray(value) || value.length === 0) {
+    return [];
+  }
+
+  const dates = value.map((date) => {
+    if (date instanceof Date) {
+      return date;
+    }
+    if (date === null) {
+      return new Date();
+    }
+    return new Date(date);
+  });
+
+  const startDate = new Date(Math.min(...dates.map((date) => date.getTime())));
+  const endDate = new Date(Math.max(...dates.map((date) => date.getTime())));
+
+  const result: string[] = [];
+  const currentDate = new Date(startDate);
+
+  while (currentDate <= endDate) {
+    if (Array.isArray(disableDates) && disableDates.includes(currentDate)) {
+      currentDate.setDate(currentDate.getDate() + 1);
+      continue;
+    } else if (disableDates === currentDate) {
+      currentDate.setDate(currentDate.getDate() + 1);
+      continue;
+    }
+
+    result.push(
+      `${currentDate.getFullYear()}-${getDisplayMonth(currentDate.getMonth())}-${getDisplayDay(
+        currentDate.getDate()
+      )}`
+    );
+    currentDate.setDate(currentDate.getDate() + 1);
+  }
+
+  return result;
+}