Fix infinity date picker problem - 51 (#997)

* fix inifinity date picker problem

* clean up

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

@@ -1,5 +1,3 @@
-/* eslint-disable prefer-const */
-
 import * as React from "react";
 import {
   View,
@@ -268,6 +266,7 @@ const DatePicker: React.FC<React.PropsWithChildren<Props>> = ({
     backgroundColor,
     inputStyle: StyleProp<TextStyle>;
 
+  // eslint-disable-next-line
   inputTextColor = colors.text.strong;
   if (disabled) {
     activeColor = colors.border.base;
@@ -285,6 +284,7 @@ const DatePicker: React.FC<React.PropsWithChildren<Props>> = ({
 
   const { lineHeight, ...subtitle1 } = typography.subtitle1;
 
+  // eslint-disable-next-line
   inputStyle = {
     paddingVertical: 0,
     color: inputTextColor,
@@ -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;
-    }
+    const isBeforeMinDate = minDate && currentDate < minDate;
+    const isAfterMaxDate = maxDate && currentDate > maxDate;
 
-    if (newDate !== currentDate) {
-      setValue(newDate);
-      onDateChange(newDate);
+    if (isBeforeMinDate) {
+      setValue(minDate);
+      onDateChange(minDate);
+    } else if (isAfterMaxDate) {
+      setValue(maxDate);
+      onDateChange(maxDate);
     }
   }, [value, minimumDate, maximumDate, onDateChange]);