Enforce a minimum and maximum date for the picker

app/routes/book-event.tsx

@@ -9,17 +9,30 @@ import {
   Textarea,
   useToast,
 } from "@chakra-ui/react";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import Success from "../../components/Success.js";
 
 export default function () {
   const toast = useToast();
+  const currentDate = new Date();
+  const currentMonth = currentDate.getUTCMonth() + 1;
+  const currentYear = currentDate.getUTCFullYear();
+  const [datePickerMax, setDatePickerMax] = useState("");
+  const [datePickerMin, setDatePickerMin] = useState("");
   const [eventDay, setEventDay] = useState("0");
   const [eventDetails, setEventDetails] = useState("");
   const [eventType, setEventType] = useState("");
   const [riddleAnswer, setRiddleAnswer] = useState("");
   const [submitSuccess, setSubmitSuccess] = useState(false);
 
+  useEffect(() => {
+    currentDate.setUTCDate(0);
+    setDatePickerMin(`${currentYear}-${currentMonth}-01`);
+    setDatePickerMax(
+      `${currentYear}-${currentMonth}-${currentDate.getUTCDate()}`,
+    );
+  }, []);
+
   async function submit() {
     let eventResp: Response;
 
@@ -91,6 +104,8 @@ export default function () {
         Event Date
       </Heading>
       <input
+        max={datePickerMax}
+        min={datePickerMin}
         onChange={(e) => setEventDay(e.target.value.split("-")[2])}
         type="date"
       />