Set the min and max range for the date picker input.

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,6 +216,8 @@ 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",