fix infinity loop date picker problem (#999)

Author: sieu-db

example/src/DatePickerExample.jsx

@@ -10,6 +10,7 @@ function DatePickerExample({ theme }) {
   const [date, setDate] = React.useState(new Date());
   const [date2, setDate2] = React.useState(new Date());
   const [date3, setDate3] = React.useState(new Date());
+  const [date4, setDate4] = React.useState(new Date());
 
   return (
     <Container style={{ backgroundColor: theme.colors.background.base }}>
@@ -153,6 +154,20 @@ function DatePickerExample({ theme }) {
           leftIconMode={"inset"}
           type={"underline"}
         />
+        <DatePicker
+          autoDismissKeyboard={true}
+          disabled={false}
+          hideLabel={false}
+          inline={false}
+          label={"Date"}
+          leftIconMode={"inset"}
+          onDateChange={setDate4}
+          type={"solid"}
+          date={date4}
+          format={"mmm d, yyyy hh:MM tt"}
+          minimumDate={new Date()}
+          mode={"datetime"}
+        />
       </Section>
     </Container>
   );

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

@@ -408,18 +408,15 @@ const DatePicker: React.FC<React.PropsWithChildren<Props>> = ({
     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);
+    const isBeforeMinDate = minDate && currentDate < minDate;
+    const isAfterMaxDate = maxDate && currentDate > maxDate;
+
+    if (isBeforeMinDate) {
+      setValue(minDate);
+      onDateChange(minDate);
+    } else if (isAfterMaxDate) {
+      setValue(maxDate);
+      onDateChange(maxDate);
     }
   }, [value, minimumDate, maximumDate, onDateChange]);