fix: date selection

components/TempDesignSystem/Form/Date/index.tsx

@@ -28,62 +28,36 @@ export default function DateSelect({ name, registerOptions = {} }: DateProps) {
     rules: registerOptions,
   })
 
-  const [dateSegments, setDateSegment] = useState<{
-    year: number | null
-    month: number | null
-    date: number | null
-    daysInMonth: number
-  }>({
-    year: null,
-    month: null,
-    date: null,
-    daysInMonth: 31,
-  })
-
   const currentYear = new Date().getFullYear()
+
   const months = rangeArray(1, 12).map((month) => ({
     value: month,
     label: `${month}`,
   }))
+
   const years = rangeArray(1900, currentYear - 18)
     .reverse()
     .map((year) => ({ value: year, label: year.toString() }))
 
+  // Ensure the user can't select a date that doesn't exist.
+  const daysInMonth = dt(currentValue).daysInMonth()
+  const days = rangeArray(1, daysInMonth).map((day) => ({
+    value: day,
+    label: `${day}`,
+  }))
+
   function createOnSelect(selector: DateName) {
     /**
      * Months are 0 index based and therefore we
      * must subtract by 1 to get the selected month
      */
     return (select: Key) => {
-      const value =
+      if (selector === DateName.month) {
-        selector === DateName.month ? Number(select) - 1 : Number(select)
+        select = Number(select) - 1
-      const newSegments = { ...dateSegments, [selector]: value }
-
-      /**
-       * Update daysInMonth when year or month changes
-       * to ensure the user can't select a date that doesn't exist.
-       */
-      if (selector === DateName.year || selector === DateName.month) {
-        const year = selector === DateName.year ? value : newSegments.year
-        const month = selector === DateName.month ? value : newSegments.month
-        if (year !== null && month !== null) {
-          newSegments.daysInMonth = dt().year(year).month(month).daysInMonth()
-        } else if (month !== null) {
-          newSegments.daysInMonth = dt().month(month).daysInMonth()
-        }
       }
-
+      const newDate = dt(currentValue).set(selector, Number(select))
-      if (Object.values(newSegments).every((val) => val !== null)) {
+      setValue(name, newDate.format("YYYY-MM-DD"))
-        const newDate = dt()
+      trigger(name)
-          .utc()
-          .set("year", newSegments.year!)
-          .set("month", newSegments.month!)
-          .set("date", Math.min(newSegments.date!, newSegments.daysInMonth))
-
-        setValue(name, newDate.format("YYYY-MM-DD"))
-        trigger(name)
-      }
-      setDateSegment(newSegments)
     }
   }
 
@@ -117,11 +91,6 @@ export default function DateSelect({ name, registerOptions = {} }: DateProps) {
           {(segment) => {
             switch (segment.type) {
               case "day":
-                const maxDays = dateSegments.daysInMonth
-                const days = rangeArray(1, maxDays).map((day) => ({
-                  value: day,
-                  label: `${day}`,
-                }))
                 return (
                   <div className={styles.day}>
                     <Select