fix: ensure the new date is always between max and min dates (#986)

Author: spiritanand

example/src/DatePickerExample.jsx

@@ -113,8 +113,8 @@ function DatePickerExample({ theme }) {
           label="Date with minimum and maximum"
           placeholder="Select a date..."
           type="solid"
-          minimumDate={new Date("April 10, 2023")}
-          maximumDate={new Date("May 10, 2023")}
+          minimumDate={new Date("2023-04-10")}
+          maximumDate={new Date("2023-05-10")}
         />
       </Section>
       <Section title="Styled">

packages/core/src/components/DatePicker/DatePicker.tsx

@@ -34,6 +34,7 @@ import {
   paddingStyleNames,
   positionStyleNames,
 } from "../../utilities";
+import { parseDate } from "./parseDate";
 
 const AnimatedText = Animated.createAnimatedComponent(Text);
 
@@ -399,6 +400,29 @@ const DatePicker: React.FC<React.PropsWithChildren<Props>> = ({
     type === "solid" ? { marginHorizontal: 12 } : {},
   ];
 
+  React.useEffect(() => {
+    const currentDate = parseDate(value);
+
+    if (!currentDate) return;
+
+    const minDate = parseDate(minimumDate);
+    const maxDate = parseDate(maximumDate);
+
+    let newDate = currentDate;
+
+    if (minDate && currentDate < minDate) {
+      newDate = minDate;
+    }
+    if (maxDate && currentDate > maxDate) {
+      newDate = maxDate;
+    }
+
+    if (newDate !== currentDate) {
+      setValue(newDate);
+      onDateChange(newDate);
+    }
+  }, [value, minimumDate, maximumDate, onDateChange]);
+
   const Picker = (
     <DateTimePicker
       value={getValidDate()}
@@ -619,20 +643,4 @@ const styles = StyleSheet.create({
   pickerContainer: { flexDirection: "column", width: "100%", zIndex: 100 },
 });
 
-function parseDate(date?: string | Date) {
-  if (typeof date === "string") {
-    const parsed = Date.parse(date);
-    if (!isNaN(parsed)) {
-      return new Date(parsed);
-    }
-    console.warn(
-      "Invalid date string:",
-      `'${date}'.`,
-      "See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date#date_time_string_format"
-    );
-    return undefined;
-  }
-  return date;
-}
-
 export default withTheme(DatePicker);

packages/core/src/components/DatePicker/parseDate.ts

@@ -0,0 +1,15 @@
+export function parseDate(date?: string | Date) {
+  if (typeof date === "string") {
+    const parsed = Date.parse(date);
+    if (!isNaN(parsed)) {
+      return new Date(parsed);
+    }
+    console.warn(
+      "Invalid date string:",
+      `'${date}'.`,
+      "See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date#date_time_string_format"
+    );
+    return undefined;
+  }
+  return date;
+}