@uxf/datepicker 11.111.0-canary.1 → 11.111.2

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

@@ -1,12 +1,11 @@
-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: (date: Date | null) => void;
-    minBookingDate?: DateString;
-    maxBookingDate?: DateString;
+    setFocusedDate: Dispatch<SetStateAction<Date | null>>;
+    minBookingDate?: Date;
+    maxBookingDate?: Date;
     numberOfMonths: number;
 }
 export interface UseDatePickerNavigationReturnType {

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

@@ -2,12 +2,11 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useDatePickerNavigation = useDatePickerNavigation;
 const react_1 = require("react");
-const create_date_string_1 = require("../utils/create-date-string");
-const date_string_1 = require("../utils/date-string");
+const dayjs_utils_1 = require("../utils/dayjs-utils");
 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;
+    var _a, _b, _c, _d;
     const goToPrevMonths = (0, react_1.useCallback)(() => {
         const newActiveMonths = (0, get_next_active_month_1.getNextActiveMonth)(activeMonths, numberOfMonths, -1);
         setActiveMonths(newActiveMonths);
@@ -50,35 +49,40 @@ function useDatePickerNavigation({ activeMonths, setActiveMonths, setFocusedDate
         setFocusedDate(null);
         return newActiveMonths;
     }, [activeMonths, numberOfMonths, setActiveMonths, setFocusedDate]);
-    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 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 canGoTo = (0, react_1.useCallback)((month, type) => {
-        if (!minBookingDate && !maxBookingDate) {
-            return true;
+        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");
+            }
         }
-        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;
+        return true;
     }, [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: "2015-05-05",
-        maxBookingDate: "2025-10-11",
+        minBookingDate: new Date("2015-05-05"),
+        maxBookingDate: new Date("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,42 +34,6 @@ 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)(() => {
@@ -79,8 +43,8 @@ test("actions", () => {
             setActiveMonths,
             numberOfMonths: 1,
             setFocusedDate: () => undefined,
-            minBookingDate: "2020-12-25",
-            maxBookingDate: "2022-03-11",
+            minBookingDate: new Date("2020-12-25"),
+            maxBookingDate: new Date("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 date_string_1 = require("../utils/date-string");
+const dayjs_utils_1 = require("../utils/dayjs-utils");
 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,50 +10,38 @@ 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 allDisabledDates = [
-        ...unavailableDates.map(date_string_1.toDateString),
-        ...disabledDatesFromConfig.map(date_string_1.toDateString),
-    ];
+    const disabledDates = [...unavailableDates, ...disabledDatesFromConfig];
     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)(normalizedSelectedDate);
-    // Consumer's isDateBlocked callback still receives Date via fromDateString
+    const [focusedDate, setFocusedDate] = (0, react_1.useState)(selectedDate);
     const disabledDatesByUser = (date) => {
-        return (0, is_in_unavailable_dates_1.isInUnavailableDates)(allDisabledDates, date) || isDateBlockedProps((0, date_string_1.fromDateString)(date));
+        return (0, is_in_unavailable_dates_1.isInUnavailableDates)(disabledDates, date) || isDateBlockedProps(date);
     };
     const onDateFocus = (0, react_1.useCallback)((date) => {
-        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)) {
+        setFocusedDate(date);
+        if (!focusedDate || !activeMonths.map((m) => m.month).includes((0, dayjs_utils_1.dayjsEnRaw)(date).month())) {
             setActiveMonths((0, get_initial_months_1.getInitialMonths)(numberOfMonths, date));
         }
     }, [activeMonths, focusedDate, numberOfMonths]);
-    const _isDateSelected = (date) => (0, is_start_date_1.isStartDate)((0, date_string_1.toDateString)(date), normalizedSelectedDate);
+    const _isDateSelected = (date) => (0, is_start_date_1.isStartDate)(date, selectedDate);
     const _isDateBlocked = (date) => (0, is_date_blocked_1.isDateBlocked)({
-        date: (0, date_string_1.toDateString)(date),
-        minBookingDate: normalizedMinBookingDate,
-        maxBookingDate: normalizedMaxBookingDate,
-        startDate: normalizedSelectedDate,
-        endDate: normalizedSelectedDate,
+        date,
+        minBookingDate,
+        maxBookingDate,
+        startDate: selectedDate,
+        endDate: selectedDate,
         minBookingDays: 1,
-        isDateBlockedFn: isDateBlockedProps,
-        unavailableDates: allDisabledDates,
+        isDateBlockedFn: disabledDatesByUser,
     });
-    const isDateFocused = (date) => focusedDate !== null && (0, date_string_1.toDateString)(date) === focusedDate;
+    const isDateFocused = (date) => (focusedDate ? (0, dayjs_utils_1.dayjsEnRaw)(date).isSame(focusedDate, "day") : false);
     const _isDateHovered = (date) => (0, is_date_hovered_1.isDateHovered)({
-        date: (0, date_string_1.toDateString)(date),
+        date,
         hoveredDate,
-        startDate: normalizedSelectedDate,
-        endDate: normalizedSelectedDate,
+        startDate: selectedDate,
+        endDate: selectedDate,
         minBookingDays: 1,
         exactMinBookingDays: false,
         isDateBlocked: disabledDatesByUser,
@@ -77,8 +65,7 @@ function useDatePicker({ datesConfig = [], firstDayOfWeek = 0, initialVisibleMon
         onDateChange(null);
     }, [onDateChange]);
     function onDateSelect(date) {
-        const dateStr = (0, date_string_1.toDateString)(date);
-        if (dateStr !== normalizedSelectedDate) {
+        if (!(0, dayjs_utils_1.dayjsEnRaw)(date).isSame(selectedDate)) {
             onDateChange(date);
         }
         else {
@@ -90,10 +77,9 @@ function useDatePicker({ datesConfig = [], firstDayOfWeek = 0, initialVisibleMon
             setHoveredDate(null);
         }
         else {
-            const dateStr = (0, date_string_1.toDateString)(date);
-            const isNotBlocked = !_isDateBlocked(date) || (normalizedSelectedDate && dateStr === normalizedSelectedDate);
+            const isNotBlocked = !_isDateBlocked(date) || (selectedDate && (0, dayjs_utils_1.dayjsEnRaw)(date).isSame(selectedDate, "day"));
             if (isNotBlocked) {
-                setHoveredDate(dateStr);
+                setHoveredDate(date);
             }
             else if (hoveredDate !== null) {
                 setHoveredDate(null);
@@ -103,17 +89,17 @@ function useDatePicker({ datesConfig = [], firstDayOfWeek = 0, initialVisibleMon
     return {
         ...(0, use_date_picker_navigation_1.useDatePickerNavigation)({
             activeMonths,
-            maxBookingDate: normalizedMaxBookingDate,
-            minBookingDate: normalizedMinBookingDate,
+            maxBookingDate,
+            minBookingDate,
             numberOfMonths,
             setActiveMonths,
-            setFocusedDate: (date) => setFocusedDate(date ? (0, date_string_1.toDateString)(date) : null),
+            setFocusedDate,
         }),
         activeMonths,
         datesConfig,
         firstDayOfWeek,
-        focusedDate: focusedDate ? (0, date_string_1.fromDateString)(focusedDate) : null,
-        hoveredDate: hoveredDate ? (0, date_string_1.fromDateString)(hoveredDate) : null,
+        focusedDate,
+        hoveredDate,
         isDateBlocked: _isDateBlocked,
         isDateFocused,
         isDateHovered: _isDateHovered,
@@ -125,6 +111,6 @@ function useDatePicker({ datesConfig = [], firstDayOfWeek = 0, initialVisibleMon
         onResetDates: onReset,
         preventScroll,
         selectedDate,
-        unavailableDates: allDisabledDates.map(date_string_1.fromDateString),
+        unavailableDates: disabledDates,
     };
 }

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:00Z");
+    const BASE_DATE = new Date("2021-09-15T00:00:00+02:00");
     const { result } = (0, react_1.renderHook)(() => (0, use_date_picker_1.useDatePicker)({
         selectedDate: BASE_DATE,
         onDateChange: () => undefined,
-        minBookingDate: new Date("2020-01-01T00:00:00Z"),
+        minBookingDate: new Date("2020-01-01"),
     }));
     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 date_string_1 = require("../utils/date-string");
+const dayjs_utils_1 = require("../utils/dayjs-utils");
 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,62 +17,44 @@ 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 allDisabledDates = [
-        ...unavailableDates.map(date_string_1.toDateString),
-        ...disabledDatesFromConfig.map(date_string_1.toDateString),
-    ];
+    const disabledDates = [...unavailableDates, ...disabledDatesFromConfig];
     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)(normalizedStartDate);
-    // Consumer's isDateBlockedProps (Date → boolean) wrapped as DateString → boolean
-    const disabledDatesByUser = isDateBlockedProps || allDisabledDates.length > 0
+    const [focusedDate, setFocusedDate] = (0, react_1.useState)(startDate);
+    const disabledDatesByUser = isDateBlockedProps || disabledDates.length > 0
         ? (date) => {
             var _a;
-            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));
+            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);
         }
         : null;
     const onDateFocus = (0, react_1.useCallback)((date) => {
-        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)) {
+        setFocusedDate(date);
+        if (!focusedDate || !activeMonths.map((m) => m.month).includes((0, dayjs_utils_1.dayjsEnRaw)(date).month())) {
             setActiveMonths((0, get_initial_months_1.getInitialMonths)(numberOfMonths, date));
         }
     }, [activeMonths, focusedDate, numberOfMonths]);
-    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 _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 _isDateBlocked = (date) => (0, is_date_blocked_1.isDateBlocked)({
-        date: (0, date_string_1.toDateString)(date),
-        minBookingDate: normalizedMinBookingDate,
-        maxBookingDate: normalizedMaxBookingDate,
-        startDate: normalizedStartDate,
-        endDate: normalizedEndDate,
+        date,
+        minBookingDate,
+        maxBookingDate,
+        startDate,
+        endDate,
         minBookingDays,
-        isDateBlockedFn: isDateBlockedProps,
-        unavailableDates: allDisabledDates,
+        isDateBlockedFn: disabledDatesByUser,
     });
-    const isDateFocused = (date) => focusedDate !== null && (0, date_string_1.toDateString)(date) === focusedDate;
+    const isDateFocused = (date) => (focusedDate ? (0, dayjs_utils_1.dayjsEnRaw)(date).isSame(focusedDate, "day") : false);
     const _isDateHovered = (date) => (0, is_date_hovered_1.isDateHovered)({
-        date: (0, date_string_1.toDateString)(date),
+        date,
         hoveredDate,
-        startDate: normalizedStartDate,
-        endDate: normalizedEndDate,
+        startDate,
+        endDate,
         minBookingDays,
         exactMinBookingDays,
         isDateBlocked: disabledDatesByUser,
@@ -101,45 +83,41 @@ 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: normalizedMinBookingDate,
-                maxBookingDate: normalizedMaxBookingDate,
+                minBookingDate,
+                maxBookingDate,
                 isDateBlocked: disabledDatesByUser,
-                startDate: dateStr,
+                startDate: date,
                 endDate: null,
             })) {
             onDatesChange({
-                startDate: (0, date_string_1.fromDateString)(dateStr),
-                endDate: (0, date_string_1.fromDateString)((0, date_string_1.addDays)(dateStr, minBookingDays - 1)),
+                startDate: date,
+                endDate: (0, dayjs_utils_1.dayjsEnRaw)(date)
+                    .add(minBookingDays - 1, "day")
+                    .toDate(),
                 focusedInput: null,
             });
         }
-        else if ((((focusedInput === exports.END_DATE && normalizedStartDate && dateStr < normalizedStartDate) ||
-            (focusedInput === exports.START_DATE && normalizedEndDate && dateStr > normalizedEndDate)) &&
+        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))) &&
             !exactMinBookingDays &&
             (0, can_select_range_1.canSelectRange)({
                 minBookingDays,
                 isDateBlocked: disabledDatesByUser,
-                startDate: dateStr,
+                startDate: date,
                 endDate: null,
             })) ||
             (focusedInput === exports.START_DATE &&
                 !exactMinBookingDays &&
-                (0, can_select_range_1.canSelectRange)({
-                    minBookingDays,
-                    isDateBlocked: disabledDatesByUser,
-                    endDate: normalizedEndDate,
-                    startDate: dateStr,
-                }))) {
+                (0, can_select_range_1.canSelectRange)({ minBookingDays, isDateBlocked: disabledDatesByUser, endDate, startDate: date }))) {
             onDatesChange({
                 endDate: null,
-                startDate: (0, date_string_1.fromDateString)(dateStr),
+                startDate: date,
                 focusedInput: exports.END_DATE,
             });
         }
@@ -149,58 +127,51 @@ function useDateRangePicker({ changeActiveMonthOnSelect = false, datesConfig = [
                 minBookingDays,
                 isDateBlocked: disabledDatesByUser,
                 endDate: null,
-                startDate: dateStr,
+                startDate: date,
             })) {
             onDatesChange({
                 endDate: null,
-                startDate: (0, date_string_1.fromDateString)(dateStr),
+                startDate: date,
                 focusedInput: exports.END_DATE,
             });
         }
         else if (focusedInput === exports.END_DATE &&
-            normalizedStartDate &&
-            dateStr >= normalizedStartDate &&
+            startDate &&
+            !(0, dayjs_utils_1.dayjsEnRaw)(date).isBefore(startDate) &&
             !exactMinBookingDays &&
-            (0, can_select_range_1.canSelectRange)({
-                minBookingDays,
-                isDateBlocked: disabledDatesByUser,
-                startDate: normalizedStartDate,
-                endDate: dateStr,
-            })) {
+            (0, can_select_range_1.canSelectRange)({ minBookingDays, isDateBlocked: disabledDatesByUser, startDate, endDate: date })) {
             onDatesChange({
-                startDate: (0, date_string_1.fromDateString)(normalizedStartDate),
-                endDate: (0, date_string_1.fromDateString)(dateStr),
+                startDate,
+                endDate: date,
                 focusedInput: null,
             });
         }
         if (focusedInput !== exports.END_DATE &&
-            (!focusedDate || dateStr.slice(0, 7) !== focusedDate.slice(0, 7)) &&
+            (!focusedDate || !(0, dayjs_utils_1.dayjsEnRaw)(date).isSame(focusedDate, "month")) &&
             changeActiveMonthOnSelect) {
-            setActiveMonths((0, get_initial_months_1.getInitialMonths)(numberOfMonths, (0, date_string_1.fromDateString)(dateStr)));
+            setActiveMonths((0, get_initial_months_1.getInitialMonths)(numberOfMonths, date));
         }
     }
     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: normalizedMinBookingDate,
-            maxBookingDate: normalizedMaxBookingDate,
+            minBookingDate,
+            maxBookingDate,
             isDateBlocked: disabledDatesByUser,
-            startDate: startStr,
-            endDate: endStr,
+            startDate: start,
+            endDate: end,
         })) {
             onDatesChange({
-                endDate: endStr ? (0, date_string_1.fromDateString)(endStr) : null,
-                startDate: (0, date_string_1.fromDateString)(startStr),
+                endDate: end,
+                startDate: start,
                 focusedInput: exports.START_DATE,
             });
         }
         if (focusedInput !== exports.END_DATE &&
-            (!focusedDate || startStr.slice(0, 7) !== focusedDate.slice(0, 7)) &&
+            (!focusedDate || !(0, dayjs_utils_1.dayjsEnRaw)(start).isSame(focusedDate, "month")) &&
             changeActiveMonthOnSelect) {
-            setActiveMonths((0, get_initial_months_1.getInitialMonths)(numberOfMonths, (0, date_string_1.fromDateString)(startStr)));
+            setActiveMonths((0, get_initial_months_1.getInitialMonths)(numberOfMonths, start));
         }
     }
     // eslint-disable-next-line complexity
@@ -209,20 +180,20 @@ function useDateRangePicker({ changeActiveMonthOnSelect = false, datesConfig = [
             setHoveredDate(null);
         }
         else {
-            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)
+            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"))
                 : true;
-            const isHoveredDateBeforeOrEqualMaxDate = normalizedMaxBookingDate
-                ? dateStr <= normalizedMaxBookingDate
+            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)
                 : true;
-            const potentialEndDateStr = (0, date_string_1.addDays)(dateStr, minBookingDays - 1);
-            const isPotentialEndDateAfterOrEqualMinDate = normalizedMinBookingDate
-                ? potentialEndDateStr >= normalizedMinBookingDate
-                : true;
-            const isPotentialEndDateBeforeOrEqualMaxDate = normalizedMaxBookingDate
-                ? potentialEndDateStr <= normalizedMaxBookingDate
+            const isPotentialEndDateBeforeOrEqualMaxDate = maxBookingDate
+                ? !(0, dayjs_utils_1.dayjsEnRaw)(potentialEndDate).isAfter(maxBookingDate)
                 : true;
             const isExactAndInRange = exactMinBookingDays &&
                 minBookingDays > 1 &&
@@ -230,17 +201,19 @@ function useDateRangePicker({ changeActiveMonthOnSelect = false, datesConfig = [
                 isHoveredDateBeforeOrEqualMaxDate &&
                 isPotentialEndDateAfterOrEqualMinDate &&
                 isPotentialEndDateBeforeOrEqualMaxDate;
-            const isInRange = normalizedStartDate &&
-                !normalizedEndDate &&
+            // Is date in range
+            const isInRange = startDate &&
+                !endDate &&
                 !exactMinBookingDays &&
                 isHoveredDateAfterOrEqualMinDate &&
                 isHoveredDateBeforeOrEqualMaxDate;
-            const isMinBookingDaysInRange = minBookingDays > 1 && normalizedStartDate
-                ? dateStr > normalizedStartDate && dateStr < (0, date_string_1.addDays)(normalizedStartDate, minBookingDays - 2)
+            // 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"))
                 : true;
-            const isStartDateHoveredAndInRange = normalizedStartDate && dateStr === normalizedStartDate && isMinBookingDaysInRange;
+            const isStartDateHoveredAndInRange = startDate && (0, dayjs_utils_1.dayjsEnRaw)(date).isSame(startDate, "day") && isMinBookingDaysInRange;
             if (isNotBlocked && (isExactAndInRange || isInRange || isStartDateHoveredAndInRange)) {
-                setHoveredDate(dateStr);
+                setHoveredDate(date);
             }
             else if (hoveredDate !== null) {
                 setHoveredDate(null);
@@ -250,17 +223,17 @@ function useDateRangePicker({ changeActiveMonthOnSelect = false, datesConfig = [
     return {
         ...(0, use_date_picker_navigation_1.useDatePickerNavigation)({
             activeMonths,
-            maxBookingDate: normalizedMaxBookingDate,
-            minBookingDate: normalizedMinBookingDate,
+            maxBookingDate,
+            minBookingDate,
             numberOfMonths,
             setActiveMonths,
-            setFocusedDate: (d) => setFocusedDate(d ? (0, date_string_1.toDateString)(d) : null),
+            setFocusedDate,
         }),
         activeMonths,
         datesConfig,
         firstDayOfWeek,
-        focusedDate: focusedDate ? (0, date_string_1.fromDateString)(focusedDate) : null,
-        hoveredDate: hoveredDate ? (0, date_string_1.fromDateString)(hoveredDate) : null,
+        focusedDate,
+        hoveredDate,
         isDateBlocked: _isDateBlocked,
         isDateFocused,
         isDateHovered: _isDateHovered,
@@ -274,6 +247,6 @@ function useDateRangePicker({ changeActiveMonthOnSelect = false, datesConfig = [
         onDateSelect,
         onDatesSelect,
         onResetDates,
-        unavailableDates: allDisabledDates.map(date_string_1.fromDateString),
+        unavailableDates: disabledDates,
     };
 }