From 78abdc7e4112380f5344c2cfc4d85a7f24087a83 Mon Sep 17 00:00:00 2001
From: Lucid Kobold <72232219+LucidKobold@users.noreply.github.com>
Date: Sat, 26 Mar 2022 23:15:37 -0500
Subject: [PATCH] Set the min and max range for the date picker input.

---
 components/calender/DatePicker.tsx | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/components/calender/DatePicker.tsx b/components/calender/DatePicker.tsx
index 6df017d..2a346f5 100644
--- a/components/calender/DatePicker.tsx
+++ b/components/calender/DatePicker.tsx
@@ -24,6 +24,8 @@ import {
   Field,
   FieldProps
 } from "formik";
+import { format } from "date-fns"
+import findValidDateRange from "../../lib/findValidDateRange"
 import FormValidateEmoji from "./FormValidateEmoji";
 import { CalenderContext } from "../../contexts/CalenderContext";
 
@@ -34,6 +36,8 @@ const DatePicker = (): JSX.Element => {
 
   const [valid, setValid] = useState<boolean>(false);
 
+  const validDateRange = findValidDateRange();
+
   const validateDate = (
     dateString?: string | undefined
   ): string | undefined => {
@@ -212,15 +216,17 @@ const DatePicker = (): JSX.Element => {
                               {...field}
                               id="date"
                               textAlign="center"
+                              min={format(validDateRange.start, "yyyy-MM-dd")}
+                              max={format(validDateRange.end, "yyyy-MM-dd")}
                               {...(!form.errors.date && form.touched.date
                                 ? {
+                                  borderColor: "brand.valid",
+                                  boxShadow: "0 0 0 1px #00c17c",
+                                  _hover: {
                                     borderColor: "brand.valid",
-                                    boxShadow: "0 0 0 1px #00c17c",
-                                    _hover: {
-                                      borderColor: "brand.valid",
-                                      boxShadow: "0 0 0 1px #00c17c"
-                                    }
+                                    boxShadow: "0 0 0 1px #00c17c"
                                   }
+                                }
                                 : "")}
                             />
                             {!form.touched.date && (