feat: display months with text instead of number

components/TempDesignSystem/Form/Date/index.tsx

@@ -8,6 +8,8 @@ import { useIntl } from "react-intl"
 import { dt } from "@/lib/dt"
 
 import Select from "@/components/TempDesignSystem/Select"
+import useLang from "@/hooks/useLang"
+import { getLocalizedMonthName } from "@/utils/dateFormatting"
 import { rangeArray } from "@/utils/rangeArray"
 
 import ErrorMessage from "../ErrorMessage"
@@ -33,9 +35,10 @@ export default function DateSelect({ name, registerOptions = {} }: DateProps) {
   const month = watch(DateName.month)
   const day = watch(DateName.day)
 
+  const lang = useLang()
   const months = rangeArray(1, 12).map((month) => ({
     value: month,
-    label: `${month}`,
+    label: getLocalizedMonthName(month, lang),
   }))
 
   const currentYear = new Date().getFullYear()

utils/dateFormatting.ts

@@ -0,0 +1,15 @@
+import { Lang } from "@/constants/languages"
+
+/**
+ * Get the localized month name for a given month index and language
+ * @param monthIndex - The month index (1-12)
+ * @param lang - the language to use, Lang enum
+ * @returns The localized month name
+ */
+export function getLocalizedMonthName(monthIndex: number, lang: Lang) {
+  const monthName = new Date(2024, monthIndex - 1).toLocaleString(lang, {
+    month: "long",
+  })
+
+  return monthName.charAt(0).toUpperCase() + monthName.slice(1)
+}