Format date displayed in Releases section (#14183)

Closes #14177 

I noticed a `formatDisplayDate` file being used in `twenty-website` and
created the same one for `twenty-front` as well. Unit tests for the same
have been added.

<img width="1438" height="770" alt="image"
src="https://github.com/user-attachments/assets/5aa6eef5-19c5-4108-bf3f-c582d0ca1b59"
/>
<img width="1275" height="785" alt="image"
src="https://github.com/user-attachments/assets/20a87ba6-fca4-472c-a691-362901505303"
/>

---------

Co-authored-by: Félix Malfait <felix@twenty.com>

packages/twenty-front/src/modules/ui/input/components/internal/date/components/AbsoluteDatePickerHeader.tsx

@@ -1,11 +1,14 @@
 import styled from '@emotion/styled';
 import { DateTime } from 'luxon';
+import { useRecoilValue } from 'recoil';
 
+import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMemberState';
 import { Select } from '@/ui/input/components/Select';
 import { DateTimeInput } from '@/ui/input/components/internal/date/components/DateTimeInput';
 
 import { getMonthSelectOptions } from '@/ui/input/components/internal/date/utils/getMonthSelectOptions';
 import { ClickOutsideListenerContext } from '@/ui/utilities/pointer-event/contexts/ClickOutsideListenerContext';
+import { SOURCE_LOCALE } from 'twenty-shared/translations';
 import { IconChevronLeft, IconChevronRight } from 'twenty-ui/display';
 import { LightIconButton } from 'twenty-ui/input';
 import {
@@ -54,6 +57,9 @@ export const AbsoluteDatePickerHeader = ({
   isDateTimeInput,
   hideInput = false,
 }: AbsoluteDatePickerHeaderProps) => {
+  const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState);
+  const userLocale = currentWorkspaceMember?.locale ?? SOURCE_LOCALE;
+
   const endOfDayDateTimeInLocalTimezone = DateTime.now().set({
     day: date.getDate(),
     month: date.getMonth() + 1,
@@ -84,7 +90,7 @@ export const AbsoluteDatePickerHeader = ({
         >
           <Select
             dropdownId={MONTH_AND_YEAR_DROPDOWN_MONTH_SELECT_ID}
-            options={getMonthSelectOptions()}
+            options={getMonthSelectOptions(userLocale)}
             onChange={onChangeMonth}
             value={endOfDayInLocalTimezone.getMonth()}
             fullWidth

packages/twenty-front/src/modules/ui/input/components/internal/date/utils/getMonthSelectOptions.ts

@@ -1,16 +1,24 @@
-const getMonthName = (index: number): string =>
-  new Intl.DateTimeFormat('en-US', { month: 'long' }).format(
+const getMonthName = (index: number, locale?: string): string =>
+  new Intl.DateTimeFormat(locale || 'en-US', { month: 'long' }).format(
     new Date(0, index, 1),
   );
 
-const getMonthNames = (monthNames: string[] = []): string[] => {
+const getMonthNames = (
+  locale?: string,
+  monthNames: string[] = [],
+): string[] => {
   if (monthNames.length === 12) return monthNames;
 
-  return getMonthNames([...monthNames, getMonthName(monthNames.length)]);
+  return getMonthNames(locale, [
+    ...monthNames,
+    getMonthName(monthNames.length, locale),
+  ]);
 };
 
-export const getMonthSelectOptions = (): { label: string; value: number }[] =>
-  getMonthNames().map((month, index) => ({
+export const getMonthSelectOptions = (
+  locale?: string,
+): { label: string; value: number }[] =>
+  getMonthNames(locale).map((month, index) => ({
     label: month,
     value: index,
   }));