From ca74bdb31ea262e5be2671c389e622fea18c2d87 Mon Sep 17 00:00:00 2001
From: Suryansh Anand <spirit@anandsur.com>
Date: Thu, 16 Jan 2025 22:35:50 +0530
Subject: [PATCH] fix: ensure the new date is always between max and min dates

---
 example/src/DatePickerExample.jsx             |  4 +-
 .../src/components/DatePicker/DatePicker.tsx  | 40 +++++++++++--------
 .../src/components/DatePicker/parseDate.ts    | 15 +++++++
 3 files changed, 41 insertions(+), 18 deletions(-)
 create mode 100644 packages/core/src/components/DatePicker/parseDate.ts

diff --git a/example/src/DatePickerExample.jsx b/example/src/DatePickerExample.jsx
index 85ad7a23a..97cadc7dc 100644
--- a/example/src/DatePickerExample.jsx
+++ b/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">
diff --git a/packages/core/src/components/DatePicker/DatePicker.tsx b/packages/core/src/components/DatePicker/DatePicker.tsx
index b190a43b0..9affae205 100644
--- a/packages/core/src/components/DatePicker/DatePicker.tsx
+++ b/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);
diff --git a/packages/core/src/components/DatePicker/parseDate.ts b/packages/core/src/components/DatePicker/parseDate.ts
new file mode 100644
index 000000000..38b39a8fd
--- /dev/null
+++ b/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;
+}