@uxf/datepicker 11.111.2 → 11.114.0

package/hooks/use-date-picker-navigation.d.ts

@@ -1,11 +1,12 @@
+import { DateString } from "@uxf/core/date";
 import { Dispatch, SetStateAction } from "react";
 import { MonthType } from "../utils/types";
 export interface UseDatePickerNavigationProps {
     activeMonths: MonthType[];
     setActiveMonths: Dispatch<SetStateAction<MonthType[]>>;
-    setFocusedDate: Dispatch<SetStateAction<Date | null>>;
-    minBookingDate?: Date;
-    maxBookingDate?: Date;
+    setFocusedDate: (date: Date | null) => void;
+    minBookingDate?: DateString;
+    maxBookingDate?: DateString;
     numberOfMonths: number;
 }
 export interface UseDatePickerNavigationReturnType {

package/hooks/use-date-picker-navigation.js

@@ -2,11 +2,12 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useDatePickerNavigation = useDatePickerNavigation;
 const react_1 = require("react");
-const dayjs_utils_1 = require("../utils/dayjs-utils");
+const create_date_string_1 = require("../utils/create-date-string");
+const date_string_1 = require("../utils/date-string");
 const get_initial_months_1 = require("../utils/get-initial-months");
 const get_next_active_month_1 = require("../utils/get-next-active-month");
 function useDatePickerNavigation({ activeMonths, setActiveMonths, setFocusedDate, minBookingDate, maxBookingDate, numberOfMonths, }) {
-    var _a, _b, _c, _d;
+    var _a, _b;
     const goToPrevMonths = (0, react_1.useCallback)(() => {
         const newActiveMonths = (0, get_next_active_month_1.getNextActiveMonth)(activeMonths, numberOfMonths, -1);
         setActiveMonths(newActiveMonths);
@@ -49,40 +50,35 @@ function useDatePickerNavigation({ activeMonths, setActiveMonths, setFocusedDate
         setFocusedDate(null);
         return newActiveMonths;
     }, [activeMonths, numberOfMonths, setActiveMonths, setFocusedDate]);
-    const canGoToPrevMonth = minBookingDate
-        ? !(0, dayjs_utils_1.dayjsEnRaw)((_b = (_a = activeMonths.at(0)) === null || _a === void 0 ? void 0 : _a.date) !== null && _b !== void 0 ? _b : new Date()).isBefore((0, dayjs_utils_1.dayjsEnRaw)(minBookingDate))
-        : true;
-    const canGoToNextMonth = maxBookingDate
-        ? !(0, dayjs_utils_1.dayjsEnWithTz)(activeMonths[activeMonths.length - 1].date)
-            .endOf("month")
-            .isAfter((0, dayjs_utils_1.dayjsEnWithTz)(maxBookingDate))
-        : true;
-    const canGoToPrevYear = minBookingDate
-        ? !(0, dayjs_utils_1.dayjsEnWithTz)((_d = (_c = activeMonths.at(0)) === null || _c === void 0 ? void 0 : _c.date) !== null && _d !== void 0 ? _d : new Date())
-            .subtract(1, "year")
-            .endOf("year")
-            .isBefore((0, dayjs_utils_1.dayjsEnRaw)(minBookingDate))
-        : true;
-    const canGoToNextYear = maxBookingDate
-        ? !(0, dayjs_utils_1.dayjsEnWithTz)(activeMonths[activeMonths.length - 1].date)
-            .add(1, "year")
-            .startOf("year")
-            .isAfter((0, dayjs_utils_1.dayjsEnWithTz)(maxBookingDate))
-        : true;
+    const firstMonthStr = (0, date_string_1.toDateString)((_b = (_a = activeMonths.at(0)) === null || _a === void 0 ? void 0 : _a.date) !== null && _b !== void 0 ? _b : new Date());
+    const lastMonthStr = (0, date_string_1.toDateString)(activeMonths[activeMonths.length - 1].date);
+    const firstYear = parseInt(firstMonthStr.slice(0, 4), 10);
+    const lastYear = parseInt(lastMonthStr.slice(0, 4), 10);
+    // Can navigate back if the first active month is not before minBookingDate.
+    const canGoToPrevMonth = !minBookingDate || minBookingDate <= firstMonthStr;
+    // Can navigate forward if the month after the last active month is still within maxBookingDate.
+    const canGoToNextMonth = !maxBookingDate || (0, date_string_1.addMonths)(lastMonthStr, 1) <= maxBookingDate;
+    // Can navigate back a year if Dec 31 of (firstYear - 1) is still on or after minBookingDate.
+    const canGoToPrevYear = !minBookingDate || (0, create_date_string_1.createDateString)(firstYear - 1, 11, 31) >= minBookingDate;
+    // Can navigate forward a year if Jan 1 of (lastYear + 1) is still within maxBookingDate.
+    const canGoToNextYear = !maxBookingDate || (0, create_date_string_1.createDateString)(lastYear + 1, 0) <= maxBookingDate;
     const canGoTo = (0, react_1.useCallback)((month, type) => {
-        if (minBookingDate || maxBookingDate) {
-            if (minBookingDate && maxBookingDate) {
-                return ((0, dayjs_utils_1.dayjsEnWithTz)(month).endOf(type).add(1, "day").isAfter(minBookingDate, "day") &&
-                    (0, dayjs_utils_1.dayjsEnWithTz)(month).startOf(type).subtract(1, "day").isBefore(maxBookingDate, "day"));
-            }
-            if (minBookingDate) {
-                return (0, dayjs_utils_1.dayjsEnWithTz)(month).endOf(type).add(1, "day").isAfter(minBookingDate, "day");
-            }
-            if (maxBookingDate) {
-                return (0, dayjs_utils_1.dayjsEnWithTz)(month).startOf(type).subtract(1, "day").isBefore(maxBookingDate, "day");
-            }
+        if (!minBookingDate && !maxBookingDate) {
+            return true;
         }
-        return true;
+        const ds = (0, date_string_1.toDateString)(month);
+        const year = parseInt(ds.slice(0, 4), 10);
+        if (type === "month") {
+            // Month is reachable if its range overlaps [minBookingDate, maxBookingDate].
+            // "end of this month + 1 day > min" AND "start of this month - 1 day < max"
+            const afterMin = !minBookingDate || (0, date_string_1.addMonths)(ds, 1) > minBookingDate;
+            const beforeMax = !maxBookingDate || (0, date_string_1.addDays)(ds, -1) < maxBookingDate;
+            return afterMin && beforeMax;
+        }
+        // type === "year"
+        const afterMin = !minBookingDate || (0, create_date_string_1.createDateString)(year + 1, 0) > minBookingDate;
+        const beforeMax = !maxBookingDate || (0, create_date_string_1.createDateString)(year - 1, 11, 31) < maxBookingDate;
+        return afterMin && beforeMax;
     }, [maxBookingDate, minBookingDate]);
     const canGoToMonth = (0, react_1.useCallback)((date) => canGoTo(date, "month"), [canGoTo]);
     const canGoToYear = (0, react_1.useCallback)((date) => canGoTo(date, "year"), [canGoTo]);

package/hooks/use-date-picker-navigation.test.js

@@ -24,8 +24,8 @@ test("base data with min and max date", () => {
         setActiveMonths: () => undefined,
         numberOfMonths: 1,
         setFocusedDate: () => undefined,
-        minBookingDate: new Date("2015-05-05"),
-        maxBookingDate: new Date("2025-10-11"),
+        minBookingDate: "2015-05-05",
+        maxBookingDate: "2025-10-11",
     }));
     expect(result.current.canGoToMonth(new Date("2021-08-01"))).toBe(true);
     expect(result.current.canGoToMonth(new Date("2015-04-01"))).toBe(false);
@@ -34,6 +34,42 @@ test("base data with min and max date", () => {
     expect(result.current.canGoToYear(new Date("2014-01-01"))).toBe(false);
     expect(result.current.canGoToYear(new Date("2026-01-01"))).toBe(false);
 });
+test("canGoToNextMonth edge cases with maxBookingDate", () => {
+    // Active month: September 2021 (lastMonthStr = "2021-09-01")
+    // addMonths("2021-09-01", 1) = "2021-10-01"
+    // maxBookingDate = 1st of next month ("2021-10-01"):
+    // "2021-10-01" <= "2021-10-01" → true → can navigate forward
+    // (October has at least one bookable day)
+    const { result: result1 } = (0, react_1.renderHook)(() => (0, use_date_picker_navigation_1.useDatePickerNavigation)({
+        activeMonths: ACTIVE_MONTHS,
+        setActiveMonths: () => undefined,
+        numberOfMonths: 1,
+        setFocusedDate: () => undefined,
+        maxBookingDate: "2021-10-01",
+    }));
+    expect(result1.current.canGoToNextMonth).toBe(true);
+    // maxBookingDate = last day of current month ("2021-09-30"):
+    // "2021-10-01" <= "2021-09-30" → false → cannot navigate forward
+    // (October is entirely past maxBookingDate)
+    const { result: result2 } = (0, react_1.renderHook)(() => (0, use_date_picker_navigation_1.useDatePickerNavigation)({
+        activeMonths: ACTIVE_MONTHS,
+        setActiveMonths: () => undefined,
+        numberOfMonths: 1,
+        setFocusedDate: () => undefined,
+        maxBookingDate: "2021-09-30",
+    }));
+    expect(result2.current.canGoToNextMonth).toBe(false);
+    // maxBookingDate = mid-next-month ("2021-10-15"):
+    // "2021-10-01" <= "2021-10-15" → true → can navigate forward
+    const { result: result3 } = (0, react_1.renderHook)(() => (0, use_date_picker_navigation_1.useDatePickerNavigation)({
+        activeMonths: ACTIVE_MONTHS,
+        setActiveMonths: () => undefined,
+        numberOfMonths: 1,
+        setFocusedDate: () => undefined,
+        maxBookingDate: "2021-10-15",
+    }));
+    expect(result3.current.canGoToNextMonth).toBe(true);
+});
 test("actions", () => {
     const { result: state } = (0, react_1.renderHook)(() => (0, react_2.useState)([{ month: 8, year: 2021, date: new Date("2021-09-01") }]));
     const { result, rerender } = (0, react_1.renderHook)(() => {
@@ -43,8 +79,8 @@ test("actions", () => {
             setActiveMonths,
             numberOfMonths: 1,
             setFocusedDate: () => undefined,
-            minBookingDate: new Date("2020-12-25"),
-            maxBookingDate: new Date("2022-03-11"),
+            minBookingDate: "2020-12-25",
+            maxBookingDate: "2022-03-11",
         });
     });
     // go to year 2020

package/hooks/use-date-picker.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useDatePicker = useDatePicker;
 const react_1 = require("react");
-const dayjs_utils_1 = require("../utils/dayjs-utils");
+const date_string_1 = require("../utils/date-string");
 const get_initial_months_1 = require("../utils/get-initial-months");
 const is_date_blocked_1 = require("../utils/is-date-blocked");
 const is_date_hovered_1 = require("../utils/is-date-hovered");
@@ -10,38 +10,50 @@ const is_in_unavailable_dates_1 = require("../utils/is-in-unavailable-dates");
 const is_start_date_1 = require("../utils/is-start-date");
 const use_date_picker_navigation_1 = require("./use-date-picker-navigation");
 function useDatePicker({ datesConfig = [], firstDayOfWeek = 0, initialVisibleMonth, isDateBlocked: isDateBlockedProps = () => false, maxBookingDate, minBookingDate, numberOfMonths = 1, onDateChange, preventScroll, selectedDate, unavailableDates = [], }) {
+    // --- Normalize all Date inputs to DateString at boundary ---
+    const normalizedSelectedDate = selectedDate ? (0, date_string_1.toDateString)(selectedDate) : null;
+    const normalizedMinBookingDate = minBookingDate ? (0, date_string_1.toDateString)(minBookingDate) : undefined;
+    const normalizedMaxBookingDate = maxBookingDate ? (0, date_string_1.toDateString)(maxBookingDate) : undefined;
     const disabledDatesFromConfig = datesConfig.filter((config) => config.isDisabled).flatMap((config) => config.dates);
-    const disabledDates = [...unavailableDates, ...disabledDatesFromConfig];
+    const allDisabledDates = [
+        ...unavailableDates.map(date_string_1.toDateString),
+        ...disabledDatesFromConfig.map(date_string_1.toDateString),
+    ];
     const [activeMonths, setActiveMonths] = (0, react_1.useState)(() => selectedDate
         ? (0, get_initial_months_1.getInitialMonths)(numberOfMonths, selectedDate)
         : (0, get_initial_months_1.getInitialMonths)(numberOfMonths, initialVisibleMonth || null));
     const [hoveredDate, setHoveredDate] = (0, react_1.useState)(null);
-    const [focusedDate, setFocusedDate] = (0, react_1.useState)(selectedDate);
+    const [focusedDate, setFocusedDate] = (0, react_1.useState)(normalizedSelectedDate);
+    // Consumer's isDateBlocked callback still receives Date via fromDateString
     const disabledDatesByUser = (date) => {
-        return (0, is_in_unavailable_dates_1.isInUnavailableDates)(disabledDates, date) || isDateBlockedProps(date);
+        return (0, is_in_unavailable_dates_1.isInUnavailableDates)(allDisabledDates, date) || isDateBlockedProps((0, date_string_1.fromDateString)(date));
     };
     const onDateFocus = (0, react_1.useCallback)((date) => {
-        setFocusedDate(date);
-        if (!focusedDate || !activeMonths.map((m) => m.month).includes((0, dayjs_utils_1.dayjsEnRaw)(date).month())) {
+        const dateStr = (0, date_string_1.toDateString)(date);
+        setFocusedDate(dateStr);
+        const focusedYYYYMM = (0, date_string_1.toDateString)(date).slice(0, 7);
+        if (!focusedDate ||
+            !activeMonths.some((m) => `${m.year}-${String(m.month + 1).padStart(2, "0")}` === focusedYYYYMM)) {
             setActiveMonths((0, get_initial_months_1.getInitialMonths)(numberOfMonths, date));
         }
     }, [activeMonths, focusedDate, numberOfMonths]);
-    const _isDateSelected = (date) => (0, is_start_date_1.isStartDate)(date, selectedDate);
+    const _isDateSelected = (date) => (0, is_start_date_1.isStartDate)((0, date_string_1.toDateString)(date), normalizedSelectedDate);
     const _isDateBlocked = (date) => (0, is_date_blocked_1.isDateBlocked)({
-        date,
-        minBookingDate,
-        maxBookingDate,
-        startDate: selectedDate,
-        endDate: selectedDate,
+        date: (0, date_string_1.toDateString)(date),
+        minBookingDate: normalizedMinBookingDate,
+        maxBookingDate: normalizedMaxBookingDate,
+        startDate: normalizedSelectedDate,
+        endDate: normalizedSelectedDate,
         minBookingDays: 1,
-        isDateBlockedFn: disabledDatesByUser,
+        isDateBlockedFn: isDateBlockedProps,
+        unavailableDates: allDisabledDates,
     });
-    const isDateFocused = (date) => (focusedDate ? (0, dayjs_utils_1.dayjsEnRaw)(date).isSame(focusedDate, "day") : false);
+    const isDateFocused = (date) => focusedDate !== null && (0, date_string_1.toDateString)(date) === focusedDate;
     const _isDateHovered = (date) => (0, is_date_hovered_1.isDateHovered)({
-        date,
+        date: (0, date_string_1.toDateString)(date),
         hoveredDate,
-        startDate: selectedDate,
-        endDate: selectedDate,
+        startDate: normalizedSelectedDate,
+        endDate: normalizedSelectedDate,
         minBookingDays: 1,
         exactMinBookingDays: false,
         isDateBlocked: disabledDatesByUser,
@@ -65,7 +77,8 @@ function useDatePicker({ datesConfig = [], firstDayOfWeek = 0, initialVisibleMon
         onDateChange(null);
     }, [onDateChange]);
     function onDateSelect(date) {
-        if (!(0, dayjs_utils_1.dayjsEnRaw)(date).isSame(selectedDate)) {
+        const dateStr = (0, date_string_1.toDateString)(date);
+        if (dateStr !== normalizedSelectedDate) {
             onDateChange(date);
         }
         else {
@@ -77,9 +90,10 @@ function useDatePicker({ datesConfig = [], firstDayOfWeek = 0, initialVisibleMon
             setHoveredDate(null);
         }
         else {
-            const isNotBlocked = !_isDateBlocked(date) || (selectedDate && (0, dayjs_utils_1.dayjsEnRaw)(date).isSame(selectedDate, "day"));
+            const dateStr = (0, date_string_1.toDateString)(date);
+            const isNotBlocked = !_isDateBlocked(date) || (normalizedSelectedDate && dateStr === normalizedSelectedDate);
             if (isNotBlocked) {
-                setHoveredDate(date);
+                setHoveredDate(dateStr);
             }
             else if (hoveredDate !== null) {
                 setHoveredDate(null);
@@ -89,17 +103,17 @@ function useDatePicker({ datesConfig = [], firstDayOfWeek = 0, initialVisibleMon
     return {
         ...(0, use_date_picker_navigation_1.useDatePickerNavigation)({
             activeMonths,
-            maxBookingDate,
-            minBookingDate,
+            maxBookingDate: normalizedMaxBookingDate,
+            minBookingDate: normalizedMinBookingDate,
             numberOfMonths,
             setActiveMonths,
-            setFocusedDate,
+            setFocusedDate: (date) => setFocusedDate(date ? (0, date_string_1.toDateString)(date) : null),
         }),
         activeMonths,
         datesConfig,
         firstDayOfWeek,
-        focusedDate,
-        hoveredDate,
+        focusedDate: focusedDate ? (0, date_string_1.fromDateString)(focusedDate) : null,
+        hoveredDate: hoveredDate ? (0, date_string_1.fromDateString)(hoveredDate) : null,
         isDateBlocked: _isDateBlocked,
         isDateFocused,
         isDateHovered: _isDateHovered,
@@ -111,6 +125,6 @@ function useDatePicker({ datesConfig = [], firstDayOfWeek = 0, initialVisibleMon
         onResetDates: onReset,
         preventScroll,
         selectedDate,
-        unavailableDates: disabledDates,
+        unavailableDates: allDisabledDates.map(date_string_1.fromDateString),
     };
 }

package/hooks/use-date-picker.test.js

@@ -4,11 +4,11 @@ const react_1 = require("@testing-library/react");
 const react_2 = require("react");
 const use_date_picker_1 = require("./use-date-picker");
 test("base data", () => {
-    const BASE_DATE = new Date("2021-09-15T00:00:00+02:00");
+    const BASE_DATE = new Date("2021-09-15T00:00:00Z");
     const { result } = (0, react_1.renderHook)(() => (0, use_date_picker_1.useDatePicker)({
         selectedDate: BASE_DATE,
         onDateChange: () => undefined,
-        minBookingDate: new Date("2020-01-01"),
+        minBookingDate: new Date("2020-01-01T00:00:00Z"),
     }));
     expect(result.current.firstDayOfWeek).toBe(0);
     expect(result.current.focusedDate).toStrictEqual(BASE_DATE);

package/hooks/use-date-range-picker.js

@@ -4,7 +4,7 @@ exports.END_DATE = exports.START_DATE = void 0;
 exports.useDateRangePicker = useDateRangePicker;
 const react_1 = require("react");
 const can_select_range_1 = require("../utils/can-select-range");
-const dayjs_utils_1 = require("../utils/dayjs-utils");
+const date_string_1 = require("../utils/date-string");
 const get_initial_months_1 = require("../utils/get-initial-months");
 const is_date_blocked_1 = require("../utils/is-date-blocked");
 const is_date_hovered_1 = require("../utils/is-date-hovered");
@@ -17,44 +17,62 @@ const use_date_picker_navigation_1 = require("./use-date-picker-navigation");
 exports.START_DATE = "startDate";
 exports.END_DATE = "endDate";
 function useDateRangePicker({ changeActiveMonthOnSelect = false, datesConfig = [], endDate, exactMinBookingDays = false, firstDayOfWeek = 0, focusedInput, initialVisibleMonth, isDateBlocked: isDateBlockedProps, maxBookingDate, minBookingDate, minBookingDays = 1, numberOfMonths = 2, onDatesChange, startDate, unavailableDates = [], }) {
+    // --- Normalize all Date inputs to DateString at boundary ---
+    const normalizedStartDate = startDate ? (0, date_string_1.toDateString)(startDate) : null;
+    const normalizedEndDate = endDate ? (0, date_string_1.toDateString)(endDate) : null;
+    const normalizedMinBookingDate = minBookingDate ? (0, date_string_1.toDateString)(minBookingDate) : undefined;
+    const normalizedMaxBookingDate = maxBookingDate ? (0, date_string_1.toDateString)(maxBookingDate) : undefined;
     const disabledDatesFromConfig = datesConfig.filter((config) => config.isDisabled).flatMap((config) => config.dates);
-    const disabledDates = [...unavailableDates, ...disabledDatesFromConfig];
+    const allDisabledDates = [
+        ...unavailableDates.map(date_string_1.toDateString),
+        ...disabledDatesFromConfig.map(date_string_1.toDateString),
+    ];
     const [activeMonths, setActiveMonths] = (0, react_1.useState)(() => startDate
         ? (0, get_initial_months_1.getInitialMonths)(numberOfMonths, startDate)
         : (0, get_initial_months_1.getInitialMonths)(numberOfMonths, initialVisibleMonth || null));
     const [hoveredDate, setHoveredDate] = (0, react_1.useState)(null);
-    const [focusedDate, setFocusedDate] = (0, react_1.useState)(startDate);
-    const disabledDatesByUser = isDateBlockedProps || disabledDates.length > 0
+    const [focusedDate, setFocusedDate] = (0, react_1.useState)(normalizedStartDate);
+    // Consumer's isDateBlockedProps (Date → boolean) wrapped as DateString → boolean
+    const disabledDatesByUser = isDateBlockedProps || allDisabledDates.length > 0
         ? (date) => {
             var _a;
-            return (0, is_in_unavailable_dates_1.isInUnavailableDates)(disabledDates, date) || ((_a = isDateBlockedProps === null || isDateBlockedProps === void 0 ? void 0 : isDateBlockedProps(date)) !== null && _a !== void 0 ? _a : false);
+            return ((0, is_in_unavailable_dates_1.isInUnavailableDates)(allDisabledDates, date) ||
+                ((_a = isDateBlockedProps === null || isDateBlockedProps === void 0 ? void 0 : isDateBlockedProps((0, date_string_1.fromDateString)(date))) !== null && _a !== void 0 ? _a : false));
         }
         : null;
     const onDateFocus = (0, react_1.useCallback)((date) => {
-        setFocusedDate(date);
-        if (!focusedDate || !activeMonths.map((m) => m.month).includes((0, dayjs_utils_1.dayjsEnRaw)(date).month())) {
+        const dateStr = (0, date_string_1.toDateString)(date);
+        setFocusedDate(dateStr);
+        const focusedYYYYMM = (0, date_string_1.toDateString)(date).slice(0, 7);
+        if (!focusedDate ||
+            !activeMonths.some((m) => `${m.year}-${String(m.month + 1).padStart(2, "0")}` === focusedYYYYMM)) {
             setActiveMonths((0, get_initial_months_1.getInitialMonths)(numberOfMonths, date));
         }
     }, [activeMonths, focusedDate, numberOfMonths]);
-    const _isDateSelected = (date) => (0, is_date_inside_range_1.isDateInsideRange)(date, startDate, endDate) || (0, is_first_or_last_selected_date_1.isFirstOrLastSelectedDate)(date, startDate, endDate);
-    const _isStartDate = (date) => (0, is_start_date_1.isStartDate)(date, startDate);
-    const _isEndDate = (date) => (0, is_end_date_1.isEndDate)(date, endDate);
-    const _isDateInsideRange = (date) => (0, is_date_inside_range_1.isDateInsideRange)(date, startDate, endDate);
+    const _isDateSelected = (date) => {
+        const dateStr = (0, date_string_1.toDateString)(date);
+        return ((0, is_date_inside_range_1.isDateInsideRange)(dateStr, normalizedStartDate, normalizedEndDate) ||
+            (0, is_first_or_last_selected_date_1.isFirstOrLastSelectedDate)(dateStr, normalizedStartDate, normalizedEndDate));
+    };
+    const _isStartDate = (date) => (0, is_start_date_1.isStartDate)((0, date_string_1.toDateString)(date), normalizedStartDate);
+    const _isEndDate = (date) => (0, is_end_date_1.isEndDate)((0, date_string_1.toDateString)(date), normalizedEndDate);
+    const _isDateInsideRange = (date) => (0, is_date_inside_range_1.isDateInsideRange)((0, date_string_1.toDateString)(date), normalizedStartDate, normalizedEndDate);
     const _isDateBlocked = (date) => (0, is_date_blocked_1.isDateBlocked)({
-        date,
-        minBookingDate,
-        maxBookingDate,
-        startDate,
-        endDate,
+        date: (0, date_string_1.toDateString)(date),
+        minBookingDate: normalizedMinBookingDate,
+        maxBookingDate: normalizedMaxBookingDate,
+        startDate: normalizedStartDate,
+        endDate: normalizedEndDate,
         minBookingDays,
-        isDateBlockedFn: disabledDatesByUser,
+        isDateBlockedFn: isDateBlockedProps,
+        unavailableDates: allDisabledDates,
     });
-    const isDateFocused = (date) => (focusedDate ? (0, dayjs_utils_1.dayjsEnRaw)(date).isSame(focusedDate, "day") : false);
+    const isDateFocused = (date) => focusedDate !== null && (0, date_string_1.toDateString)(date) === focusedDate;
     const _isDateHovered = (date) => (0, is_date_hovered_1.isDateHovered)({
-        date,
+        date: (0, date_string_1.toDateString)(date),
         hoveredDate,
-        startDate,
-        endDate,
+        startDate: normalizedStartDate,
+        endDate: normalizedEndDate,
         minBookingDays,
         exactMinBookingDays,
         isDateBlocked: disabledDatesByUser,
@@ -83,41 +101,45 @@ function useDateRangePicker({ changeActiveMonthOnSelect = false, datesConfig = [
     }, [onDatesChange]);
     // eslint-disable-next-line complexity
     function onDateSelect(date) {
+        const dateStr = (0, date_string_1.toDateString)(date);
         if ((focusedInput === exports.END_DATE || focusedInput === exports.START_DATE) &&
             minBookingDays > 0 &&
             exactMinBookingDays &&
             (0, can_select_range_1.canSelectRange)({
                 minBookingDays,
                 exactMinBookingDays,
-                minBookingDate,
-                maxBookingDate,
+                minBookingDate: normalizedMinBookingDate,
+                maxBookingDate: normalizedMaxBookingDate,
                 isDateBlocked: disabledDatesByUser,
-                startDate: date,
+                startDate: dateStr,
                 endDate: null,
             })) {
             onDatesChange({
-                startDate: date,
-                endDate: (0, dayjs_utils_1.dayjsEnRaw)(date)
-                    .add(minBookingDays - 1, "day")
-                    .toDate(),
+                startDate: (0, date_string_1.fromDateString)(dateStr),
+                endDate: (0, date_string_1.fromDateString)((0, date_string_1.addDays)(dateStr, minBookingDays - 1)),
                 focusedInput: null,
             });
         }
-        else if ((((focusedInput === exports.END_DATE && startDate && (0, dayjs_utils_1.dayjsEnRaw)(date).isBefore(startDate)) ||
-            (focusedInput === exports.START_DATE && endDate && (0, dayjs_utils_1.dayjsEnRaw)(date).isAfter(endDate))) &&
+        else if ((((focusedInput === exports.END_DATE && normalizedStartDate && dateStr < normalizedStartDate) ||
+            (focusedInput === exports.START_DATE && normalizedEndDate && dateStr > normalizedEndDate)) &&
             !exactMinBookingDays &&
             (0, can_select_range_1.canSelectRange)({
                 minBookingDays,
                 isDateBlocked: disabledDatesByUser,
-                startDate: date,
+                startDate: dateStr,
                 endDate: null,
             })) ||
             (focusedInput === exports.START_DATE &&
                 !exactMinBookingDays &&
-                (0, can_select_range_1.canSelectRange)({ minBookingDays, isDateBlocked: disabledDatesByUser, endDate, startDate: date }))) {
+                (0, can_select_range_1.canSelectRange)({
+                    minBookingDays,
+                    isDateBlocked: disabledDatesByUser,
+                    endDate: normalizedEndDate,
+                    startDate: dateStr,
+                }))) {
             onDatesChange({
                 endDate: null,
-                startDate: date,
+                startDate: (0, date_string_1.fromDateString)(dateStr),
                 focusedInput: exports.END_DATE,
             });
         }
@@ -127,51 +149,58 @@ function useDateRangePicker({ changeActiveMonthOnSelect = false, datesConfig = [
                 minBookingDays,
                 isDateBlocked: disabledDatesByUser,
                 endDate: null,
-                startDate: date,
+                startDate: dateStr,
             })) {
             onDatesChange({
                 endDate: null,
-                startDate: date,
+                startDate: (0, date_string_1.fromDateString)(dateStr),
                 focusedInput: exports.END_DATE,
             });
         }
         else if (focusedInput === exports.END_DATE &&
-            startDate &&
-            !(0, dayjs_utils_1.dayjsEnRaw)(date).isBefore(startDate) &&
+            normalizedStartDate &&
+            dateStr >= normalizedStartDate &&
             !exactMinBookingDays &&
-            (0, can_select_range_1.canSelectRange)({ minBookingDays, isDateBlocked: disabledDatesByUser, startDate, endDate: date })) {
+            (0, can_select_range_1.canSelectRange)({
+                minBookingDays,
+                isDateBlocked: disabledDatesByUser,
+                startDate: normalizedStartDate,
+                endDate: dateStr,
+            })) {
             onDatesChange({
-                startDate,
-                endDate: date,
+                startDate: (0, date_string_1.fromDateString)(normalizedStartDate),
+                endDate: (0, date_string_1.fromDateString)(dateStr),
                 focusedInput: null,
             });
         }
         if (focusedInput !== exports.END_DATE &&
-            (!focusedDate || !(0, dayjs_utils_1.dayjsEnRaw)(date).isSame(focusedDate, "month")) &&
+            (!focusedDate || dateStr.slice(0, 7) !== focusedDate.slice(0, 7)) &&
             changeActiveMonthOnSelect) {
-            setActiveMonths((0, get_initial_months_1.getInitialMonths)(numberOfMonths, date));
+            setActiveMonths((0, get_initial_months_1.getInitialMonths)(numberOfMonths, (0, date_string_1.fromDateString)(dateStr)));
         }
     }
     function onDatesSelect(start, end) {
+        const startStr = (0, date_string_1.toDateString)(start);
+        const endStr = end ? (0, date_string_1.toDateString)(end) : null;
         if ((0, can_select_range_1.canSelectRange)({
             minBookingDays,
             exactMinBookingDays,
-            minBookingDate,
-            maxBookingDate,
+            minBookingDate: normalizedMinBookingDate,
+            maxBookingDate: normalizedMaxBookingDate,
             isDateBlocked: disabledDatesByUser,
-            startDate: start,
-            endDate: end,
+            startDate: startStr,
+            endDate: endStr,
         })) {
             onDatesChange({
-                endDate: end,
-                startDate: start,
+                endDate: endStr ? (0, date_string_1.fromDateString)(endStr) : null,
+                startDate: (0, date_string_1.fromDateString)(startStr),
                 focusedInput: exports.START_DATE,
             });
         }
         if (focusedInput !== exports.END_DATE &&
-            (!focusedDate || !(0, dayjs_utils_1.dayjsEnRaw)(start).isSame(focusedDate, "month")) &&
+            (!focusedDate || startStr.slice(0, 7) !== focusedDate.slice(0, 7)) &&
             changeActiveMonthOnSelect) {
-            setActiveMonths((0, get_initial_months_1.getInitialMonths)(numberOfMonths, start));
+            setActiveMonths((0, get_initial_months_1.getInitialMonths)(numberOfMonths, (0, date_string_1.fromDateString)(startStr)));
         }
     }
     // eslint-disable-next-line complexity
@@ -180,20 +209,20 @@ function useDateRangePicker({ changeActiveMonthOnSelect = false, datesConfig = [
             setHoveredDate(null);
         }
         else {
-            const isNotBlocked = !_isDateBlocked(date) || (startDate && (0, dayjs_utils_1.dayjsEnRaw)(date).isSame(startDate, "day"));
-            const isHoveredDateAfterOrEqualMinDate = minBookingDate
-                ? !(0, dayjs_utils_1.dayjsEnRaw)(date).isBefore((0, dayjs_utils_1.dayjsEnRaw)(minBookingDate).subtract(1, "day"))
+            const dateStr = (0, date_string_1.toDateString)(date);
+            const isNotBlocked = !_isDateBlocked(date) || (normalizedStartDate && dateStr === normalizedStartDate);
+            const isHoveredDateAfterOrEqualMinDate = normalizedMinBookingDate
+                ? dateStr >= (0, date_string_1.addDays)(normalizedMinBookingDate, -1)
                 : true;
-            const isHoveredDateBeforeOrEqualMaxDate = maxBookingDate ? !(0, dayjs_utils_1.dayjsEnRaw)(date).isAfter(maxBookingDate) : true;
-            // Exact minimal booking days
-            const potentialEndDate = (0, dayjs_utils_1.dayjsEnRaw)(date)
-                .add(minBookingDays - 1, "day")
-                .toDate();
-            const isPotentialEndDateAfterOrEqualMinDate = minBookingDate
-                ? !(0, dayjs_utils_1.dayjsEnRaw)(potentialEndDate).isBefore(minBookingDate)
+            const isHoveredDateBeforeOrEqualMaxDate = normalizedMaxBookingDate
+                ? dateStr <= normalizedMaxBookingDate
                 : true;
-            const isPotentialEndDateBeforeOrEqualMaxDate = maxBookingDate
-                ? !(0, dayjs_utils_1.dayjsEnRaw)(potentialEndDate).isAfter(maxBookingDate)
+            const potentialEndDateStr = (0, date_string_1.addDays)(dateStr, minBookingDays - 1);
+            const isPotentialEndDateAfterOrEqualMinDate = normalizedMinBookingDate
+                ? potentialEndDateStr >= normalizedMinBookingDate
+                : true;
+            const isPotentialEndDateBeforeOrEqualMaxDate = normalizedMaxBookingDate
+                ? potentialEndDateStr <= normalizedMaxBookingDate
                 : true;
             const isExactAndInRange = exactMinBookingDays &&
                 minBookingDays > 1 &&
@@ -201,19 +230,17 @@ function useDateRangePicker({ changeActiveMonthOnSelect = false, datesConfig = [
                 isHoveredDateBeforeOrEqualMaxDate &&
                 isPotentialEndDateAfterOrEqualMinDate &&
                 isPotentialEndDateBeforeOrEqualMaxDate;
-            // Is date in range
-            const isInRange = startDate &&
-                !endDate &&
+            const isInRange = normalizedStartDate &&
+                !normalizedEndDate &&
                 !exactMinBookingDays &&
                 isHoveredDateAfterOrEqualMinDate &&
                 isHoveredDateBeforeOrEqualMaxDate;
-            // Is start date hovered and in range
-            const isMinBookingDaysInRange = minBookingDays > 1 && startDate
-                ? (0, dayjs_utils_1.dayjsEnRaw)(date).isBetween(startDate, (0, dayjs_utils_1.dayjsEnRaw)(startDate).add(minBookingDays - 2, "day"))
+            const isMinBookingDaysInRange = minBookingDays > 1 && normalizedStartDate
+                ? dateStr > normalizedStartDate && dateStr < (0, date_string_1.addDays)(normalizedStartDate, minBookingDays - 2)
                 : true;
-            const isStartDateHoveredAndInRange = startDate && (0, dayjs_utils_1.dayjsEnRaw)(date).isSame(startDate, "day") && isMinBookingDaysInRange;
+            const isStartDateHoveredAndInRange = normalizedStartDate && dateStr === normalizedStartDate && isMinBookingDaysInRange;
             if (isNotBlocked && (isExactAndInRange || isInRange || isStartDateHoveredAndInRange)) {
-                setHoveredDate(date);
+                setHoveredDate(dateStr);
             }
             else if (hoveredDate !== null) {
                 setHoveredDate(null);
@@ -223,17 +250,17 @@ function useDateRangePicker({ changeActiveMonthOnSelect = false, datesConfig = [
     return {
         ...(0, use_date_picker_navigation_1.useDatePickerNavigation)({
             activeMonths,
-            maxBookingDate,
-            minBookingDate,
+            maxBookingDate: normalizedMaxBookingDate,
+            minBookingDate: normalizedMinBookingDate,
             numberOfMonths,
             setActiveMonths,
-            setFocusedDate,
+            setFocusedDate: (d) => setFocusedDate(d ? (0, date_string_1.toDateString)(d) : null),
         }),
         activeMonths,
         datesConfig,
         firstDayOfWeek,
-        focusedDate,
-        hoveredDate,
+        focusedDate: focusedDate ? (0, date_string_1.fromDateString)(focusedDate) : null,
+        hoveredDate: hoveredDate ? (0, date_string_1.fromDateString)(hoveredDate) : null,
         isDateBlocked: _isDateBlocked,
         isDateFocused,
         isDateHovered: _isDateHovered,
@@ -247,6 +274,6 @@ function useDateRangePicker({ changeActiveMonthOnSelect = false, datesConfig = [
         onDateSelect,
         onDatesSelect,
         onResetDates,
-        unavailableDates: disabledDates,
+        unavailableDates: allDisabledDates.map(date_string_1.fromDateString),
     };
 }