Skip to content

Commit 490f431

Browse files
Merge pull request #173 from farhoudshapouran/fix/range-issues
fix: resolve date range selection logic issues Closes #167
2 parents 433807d + 4773365 commit 490f431

File tree

5 files changed

+33
-27
lines changed

5 files changed

+33
-27
lines changed

demo/components/examples/single-datepicker.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import dayjs from 'dayjs';
55
import { DateInput } from '../date-input';
66

77
export default function SingleDatePicker() {
8-
const [date, setDate] = useState<DateType>();
8+
const [date, setDate] = useState<DateType>(undefined);
99

1010
return (
1111
<View className="flex-1 gap-4">

package.json

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,10 @@
77
"types": "lib/typescript/index.d.ts",
88
"react-native": "src/index",
99
"source": "src/index",
10+
"exports": {
11+
"import": "./lib/module/index.js",
12+
"require": "./lib/commonjs/index.js"
13+
},
1014
"files": [
1115
"src",
1216
"lib",

src/components/calendar.tsx

Lines changed: 2 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { ReactNode, useMemo } from 'react';
2-
import { View, StyleSheet, ViewStyle } from 'react-native';
2+
import { View, ViewStyle } from 'react-native';
33
import { useCalendarContext } from '../calendar-context';
44
import type { CalendarViews } from '../enums';
55
import Header from './header';
@@ -15,12 +15,6 @@ const CalendarView: Record<CalendarViews, ReactNode> = {
1515
time: <TimePicker />,
1616
};
1717

18-
const defaultStyles = StyleSheet.create({
19-
root: {
20-
flex: 1,
21-
},
22-
});
23-
2418
const Calendar = () => {
2519
const {
2620
hideHeader,
@@ -41,11 +35,7 @@ const Calendar = () => {
4135
);
4236

4337
return (
44-
<View
45-
style={[defaultStyles.root, style]}
46-
className={className}
47-
testID="calendar"
48-
>
38+
<View style={style} className={className} testID="calendar">
4939
{!hideHeader ? (
5040
<Header
5141
navigationPosition={navigationPosition}

src/components/day.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -197,7 +197,7 @@ const Day = ({
197197

198198
const defaultStyles = StyleSheet.create({
199199
dayWrapper: {
200-
width: `${100 / 7}%`,
200+
width: `${99.9 / 7}%`,
201201
},
202202
dayContainer: { flex: 1, justifyContent: 'center', alignItems: 'center' },
203203
rangeWrapper: {

src/components/days.tsx

Lines changed: 25 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -127,7 +127,7 @@ const Days = () => {
127127

128128
// if the selected days in a row, implements range mode style to selected days
129129
if (multiRangeMode) {
130-
const yesterday = dayjs(day.date).add(-1, 'day');
130+
const yesterday = dayjs(day.date).subtract(1, 'day');
131131
const tomorrow = dayjs(day.date).add(1, 'day');
132132

133133
const yesterdaySelected = safeDates.some((d) =>
@@ -137,28 +137,40 @@ const Days = () => {
137137
areDatesOnSameDay(d, tomorrow)
138138
);
139139

140+
// Reset all flags
141+
inRange = false;
142+
leftCrop = false;
143+
rightCrop = false;
144+
140145
if (isSelected) {
141-
if (tomorrowSelected && yesterdaySelected) {
146+
// Case: both adjacent days are selected - this is a middle day
147+
if (yesterdaySelected && tomorrowSelected) {
142148
inRange = true;
143-
isSelected = false;
144-
} else if (tomorrowSelected) {
149+
}
150+
// Case: only tomorrow is selected - this is the start of a range
151+
else if (tomorrowSelected) {
145152
inRange = true;
146153
leftCrop = true;
147-
} else if (yesterdaySelected) {
154+
}
155+
// Case: only yesterday is selected - this is the end of a range
156+
else if (yesterdaySelected) {
148157
inRange = true;
149158
rightCrop = true;
150159
}
151160

152-
if (isFirstDayOfMonth && !tomorrowSelected) {
153-
inRange = false;
154-
}
155-
if (isLastDayOfMonth && !yesterdaySelected) {
156-
inRange = false;
161+
// Handle edge cases for first and last days of month
162+
// Only apply these special cases when the day is actually part of a range
163+
if (inRange) {
164+
if (isFirstDayOfMonth && !tomorrowSelected) {
165+
inRange = false;
166+
}
167+
if (isLastDayOfMonth && !yesterdaySelected) {
168+
inRange = false;
169+
}
157170
}
158171
}
159-
160-
isCrop =
161-
inRange && (leftCrop || rightCrop) && !(leftCrop && rightCrop);
172+
// Set derived flags based on the core flags
173+
isCrop = inRange && (leftCrop || rightCrop);
162174
inMiddle = inRange && !leftCrop && !rightCrop;
163175
rangeStart = inRange && leftCrop;
164176
rangeEnd = inRange && rightCrop;

0 commit comments

Comments
 (0)