Merge pull request #173 from farhoudshapouran/fix/range-issues

fix: resolve date range selection logic issues

Closes #167

Author: farhoudshapouran

demo/components/examples/single-datepicker.tsx

@@ -5,7 +5,7 @@ import dayjs from 'dayjs';
 import { DateInput } from '../date-input';
 
 export default function SingleDatePicker() {
-  const [date, setDate] = useState<DateType>();
+  const [date, setDate] = useState<DateType>(undefined);
 
   return (
     <View className="flex-1 gap-4">

package.json

@@ -7,6 +7,10 @@
   "types": "lib/typescript/index.d.ts",
   "react-native": "src/index",
   "source": "src/index",
+  "exports": {
+    "import": "./lib/module/index.js",
+    "require": "./lib/commonjs/index.js"
+  },
   "files": [
     "src",
     "lib",

src/components/calendar.tsx

@@ -1,5 +1,5 @@
 import React, { ReactNode, useMemo } from 'react';
-import { View, StyleSheet, ViewStyle } from 'react-native';
+import { View, ViewStyle } from 'react-native';
 import { useCalendarContext } from '../calendar-context';
 import type { CalendarViews } from '../enums';
 import Header from './header';
@@ -15,12 +15,6 @@ const CalendarView: Record<CalendarViews, ReactNode> = {
   time: <TimePicker />,
 };
 
-const defaultStyles = StyleSheet.create({
-  root: {
-    flex: 1,
-  },
-});
-
 const Calendar = () => {
   const {
     hideHeader,
@@ -41,11 +35,7 @@ const Calendar = () => {
   );
 
   return (
-    <View
-      style={[defaultStyles.root, style]}
-      className={className}
-      testID="calendar"
-    >
+    <View style={style} className={className} testID="calendar">
       {!hideHeader ? (
         <Header
           navigationPosition={navigationPosition}

src/components/day.tsx

@@ -197,7 +197,7 @@ const Day = ({
 
 const defaultStyles = StyleSheet.create({
   dayWrapper: {
-    width: `${100 / 7}%`,
+    width: `${99.9 / 7}%`,
   },
   dayContainer: { flex: 1, justifyContent: 'center', alignItems: 'center' },
   rangeWrapper: {

src/components/days.tsx

@@ -127,7 +127,7 @@ const Days = () => {
 
         // if the selected days in a row, implements range mode style to selected days
         if (multiRangeMode) {
-          const yesterday = dayjs(day.date).add(-1, 'day');
+          const yesterday = dayjs(day.date).subtract(1, 'day');
           const tomorrow = dayjs(day.date).add(1, 'day');
 
           const yesterdaySelected = safeDates.some((d) =>
@@ -137,28 +137,40 @@ const Days = () => {
             areDatesOnSameDay(d, tomorrow)
           );
 
+          // Reset all flags
+          inRange = false;
+          leftCrop = false;
+          rightCrop = false;
+
           if (isSelected) {
-            if (tomorrowSelected && yesterdaySelected) {
+            // Case: both adjacent days are selected - this is a middle day
+            if (yesterdaySelected && tomorrowSelected) {
               inRange = true;
-              isSelected = false;
-            } else if (tomorrowSelected) {
+            }
+            // Case: only tomorrow is selected - this is the start of a range
+            else if (tomorrowSelected) {
               inRange = true;
               leftCrop = true;
-            } else if (yesterdaySelected) {
+            }
+            // Case: only yesterday is selected - this is the end of a range
+            else if (yesterdaySelected) {
               inRange = true;
               rightCrop = true;
             }
 
-            if (isFirstDayOfMonth && !tomorrowSelected) {
-              inRange = false;
-            }
-            if (isLastDayOfMonth && !yesterdaySelected) {
-              inRange = false;
+            // Handle edge cases for first and last days of month
+            // Only apply these special cases when the day is actually part of a range
+            if (inRange) {
+              if (isFirstDayOfMonth && !tomorrowSelected) {
+                inRange = false;
+              }
+              if (isLastDayOfMonth && !yesterdaySelected) {
+                inRange = false;
+              }
             }
           }
-
-          isCrop =
-            inRange && (leftCrop || rightCrop) && !(leftCrop && rightCrop);
+          // Set derived flags based on the core flags
+          isCrop = inRange && (leftCrop || rightCrop);
           inMiddle = inRange && !leftCrop && !rightCrop;
           rangeStart = inRange && leftCrop;
           rangeEnd = inRange && rightCrop;