fix(ios): avoid min>max date picker crash (#1009)

* fix(ios): avoid min>max date picker crash

* fix zero value handling

* update example, spec

* Update src/utils.js

* Update test/utils.test.js

---------

Co-authored-by: Vojtech Novak <[email protected]>

Author: sterlingwes

example/App.js

@@ -471,6 +471,24 @@ export const App = () => {
               title="toggleMinMaxDate"
             />
           </View>
+          {/* This button allows for testing the error box that should show when the minimumDate prop is greater than the maximumDate prop */}
+          <View style={styles.button}>
+            <Button
+              testID="setInvertedMinMax"
+              onPress={() => {
+                if (minimumDate && maximumDate && minimumDate > maximumDate) {
+                  setMinimumDate(undefined);
+                  setMaximumDate(undefined);
+                  setShow(false);
+                } else {  
+                  setMinimumDate(new Date('2025-09-05'));
+                  setMaximumDate(new Date('2025-09-01'));
+                  setShow(true);
+                }
+              }}
+              title={minimumDate && maximumDate && minimumDate > maximumDate ? "undo min > max" : "set min > max (errors)"}
+            />
+          </View>
           <View style={{flexDirection: 'row', alignItems: 'center'}}>
             {/* This label ensures there is no regression in this former bug: https://github.com/react-native-datetimepicker/datetimepicker/issues/409 */}
             <Text style={{flexShrink: 1}}>

ios/fabric/RNDateTimePickerComponentView.mm

@@ -174,13 +174,27 @@ - (Boolean)updatePropsForPicker:(UIDatePicker *)picker props:(Props::Shared cons
         needsToUpdateMeasurements = true;
     }
 
-    if (oldPickerProps.minimumDate != newPickerProps.minimumDate) {
-        NSDate *minimumDate = convertJSTimeToDate(newPickerProps.minimumDate);
-        picker.minimumDate = adjustMinimumDate(minimumDate, newPickerProps.minuteInterval);
-    }
-
-    if (oldPickerProps.maximumDate != newPickerProps.maximumDate) {
-        picker.maximumDate = convertJSTimeToDate(newPickerProps.maximumDate);
+    Boolean minDateChanged = oldPickerProps.minimumDate != newPickerProps.minimumDate;
+    Boolean maxDateChanged = oldPickerProps.maximumDate != newPickerProps.maximumDate;
+    
+    if (minDateChanged || maxDateChanged) {
+        NSDate *newMinDate = newPickerProps.minimumDate ? convertJSTimeToDate(newPickerProps.minimumDate) : nil;
+        NSDate *newMaxDate = newPickerProps.maximumDate ? convertJSTimeToDate(newPickerProps.maximumDate) : nil;
+        
+        if (newMinDate) {
+            newMinDate = adjustMinimumDate(newMinDate, newPickerProps.minuteInterval);
+        }
+        
+        // avoid crash when min > max by ensuring a clean initial state
+        picker.minimumDate = nil;
+        picker.maximumDate = nil;
+        
+        // set the dates in all cases (whether unset/nil, some set, or both set)
+        // UNLESS min > max, then we leave them as nil and rely on our LogBox in JS
+        if (!newMinDate || !newMaxDate || [newMinDate compare:newMaxDate] != NSOrderedDescending) {
+            picker.minimumDate = newMinDate;
+            picker.maximumDate = newMaxDate;
+        }
     }
 
     if (oldPickerProps.locale != newPickerProps.locale) {

src/datetimepicker.ios.js

@@ -61,7 +61,7 @@ export default function Picker({
   disabled = false,
   ...other
 }: IOSNativeProps): React.Node {
-  sharedPropsValidation({value, timeZoneOffsetInMinutes, timeZoneName});
+  sharedPropsValidation({value, timeZoneOffsetInMinutes, timeZoneName, minimumDate, maximumDate});
 
   const display = getDisplaySafe(providedDisplay);
 

src/utils.js

@@ -35,10 +35,14 @@ export function sharedPropsValidation({
   value,
   timeZoneName,
   timeZoneOffsetInMinutes,
+  minimumDate,
+  maximumDate,
 }: {
   value: Date,
   timeZoneName?: ?string,
   timeZoneOffsetInMinutes?: ?number,
+  minimumDate?: ?Date,
+  maximumDate?: ?Date,
 }) {
   invariant(value, 'A date or time must be specified as `value` prop');
   invariant(
@@ -49,6 +53,14 @@ export function sharedPropsValidation({
     timeZoneName == null || timeZoneOffsetInMinutes == null,
     '`timeZoneName` and `timeZoneOffsetInMinutes` cannot be specified at the same time',
   );
+
+  if (minimumDate && maximumDate) {
+    invariant(
+      minimumDate <= maximumDate,
+      `DateTimePicker: minimumDate (${minimumDate.toISOString()}) is after maximumDate (${maximumDate.toISOString()}). Ensure minimumDate < maximumDate.`,
+    );
+  }
+
   if (timeZoneOffsetInMinutes !== undefined) {
     console.warn(
       '`timeZoneOffsetInMinutes` is deprecated and will be removed in a future release. Use `timeZoneName` instead.',

test/utils.test.js

@@ -1,4 +1,4 @@
-import {toMilliseconds} from '../src/utils.js';
+import {toMilliseconds, sharedPropsValidation} from '../src/utils.js';
 
 describe('utils', () => {
   describe('toMilliseconds', () => {
@@ -17,4 +17,64 @@ describe('utils', () => {
       expect(options).toHaveProperty('maximumDate', 2556057600000);
     });
   });
+
+  describe('sharedPropsValidation', () => {
+    describe('minimumDate and maximumDate validation', () => {
+      it('should not throw when dates are in correct order', () => {
+        const value = new Date('2023-06-15');
+        const minimumDate = new Date('2023-01-01');
+        const maximumDate = new Date('2023-12-31');
+
+        expect(() => {
+          sharedPropsValidation({value, minimumDate, maximumDate});
+        }).not.toThrow();
+      });
+
+      it('should not throw when dates are equal', () => {
+        const value = new Date('2023-06-15');
+        const minimumDate = new Date('2023-06-15');
+        const maximumDate = new Date('2023-06-15');
+
+        expect(() => {
+          sharedPropsValidation({value, minimumDate, maximumDate});
+        }).not.toThrow();
+      });
+
+      it('should not throw when only minimumDate is provided', () => {
+        const value = new Date('2023-06-15');
+        const minimumDate = new Date('2023-01-01');
+
+        expect(() => {
+          sharedPropsValidation({value, minimumDate});
+        }).not.toThrow();
+      });
+
+      it('should not throw when only maximumDate is provided', () => {
+        const value = new Date('2023-06-15');
+        const maximumDate = new Date('2023-12-31');
+
+        expect(() => {
+          sharedPropsValidation({value, maximumDate});
+        }).not.toThrow();
+      });
+
+      it('should not throw when neither minimumDate nor maximumDate is provided', () => {
+        const value = new Date('2023-06-15');
+
+        expect(() => {
+          sharedPropsValidation({value});
+        }).not.toThrow();
+      });
+
+      it('should throw when minimumDate is after maximumDate', () => {
+        const value = new Date('2023-06-15');
+        const minimumDate = new Date('2023-12-31');
+        const maximumDate = new Date('2023-01-01');
+
+        expect(() => {
+          sharedPropsValidation({value, minimumDate, maximumDate});
+        }).toThrow('DateTimePicker: minimumDate (2023-12-31T00:00:00.000Z) is after maximumDate (2023-01-01T00:00:00.000Z). Ensure minimumDate < maximumDate.');
+      });
+    });
+  });
 });