add custom dateFnsLocale to DatePicker

dnbexperience · Mar 10, 2025 · 35491e1 · 35491e1
1 parent 2a16b8a
commit 35491e1
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 47 deletions.
diff --git a/packages/dnb-eufemia/src/components/date-picker/DatePicker.tsx b/packages/dnb-eufemia/src/components/date-picker/DatePicker.tsx
@@ -1028,6 +1028,7 @@ function DatePicker(externalProps: DatePickerAllProps) {
                       noAutoFocus={disableAutofocus}
                       onChange={onPickerChange}
                       locale={context.locale}
+                      dateFnsLocale={context.dateFnsLocale}
                     />
                     {(addonElement || shortcuts) && (
                       <DatePickerAddon

diff --git a/packages/dnb-eufemia/src/components/date-picker/DatePickerCalendar.tsx b/packages/dnb-eufemia/src/components/date-picker/DatePickerCalendar.tsx
@@ -44,7 +44,7 @@ import {
 import Button, { ButtonProps } from '../button/Button'
 import DatePickerContext from './DatePickerContext'
 import { useTranslation } from '../../shared'
-import { InternalLocale } from '../../shared/Context'
+import { ContextProps, InternalLocale } from '../../shared/Context'
 import { DatePickerChangeEvent } from './DatePickerProvider'
 import { DatePickerDates } from './hooks/useDates'
 
@@ -65,13 +65,7 @@ export type CalendarDay = {
 
 type CalendarLocales = {
   // eslint-disable-next-line no-unused-vars
-  [locale in InternalLocale]?: Pick<Locale, 'localize' | 'formatLong'>
-}
-// Easy to access objects containing the only (in our case) needed functions for date-fns format
-const locales: CalendarLocales = {
-  'nb-NO': { localize: nbLocalize, formatLong: nbFormatLong },
-  'en-GB': { localize: enLocalize, formatLong: gbFormatLong },
-  'en-US': { localize: enLocalize, formatLong: enFormatLong },
+  [locale in InternalLocale]?: Partial<Locale>
 }
 
 export type CalendarNavigationEvent = {
@@ -82,45 +76,46 @@ export type CalendarNavigationEvent = {
 export type DatePickerCalendarProps = Omit<
   React.HTMLProps<HTMLElement>,
   'onSelect' | 'onChange'
-> & {
-  id?: string
-  nr?: number
-  /**
-   * To display what month should be shown in the first calendar by default. Defaults to the `date` respective `startDate`.
-   */
-  month?: Date
-  prevBtn?: boolean
-  nextBtn?: boolean
-  titleFormat?: string
-  dayOfWeekFormat?: string
-  firstDayOfWeek?: string
-  hideNav?: boolean
-  hideDays?: boolean
-  onlyMonth?: boolean
-  hideNextMonthWeek?: boolean
-  noAutoFocus?: boolean
-  onHover?: (day: Date) => void
-  onSelect?: (
-    event: DatePickerChangeEvent<
-      | React.MouseEvent<HTMLSpanElement>
-      | React.KeyboardEvent<HTMLTableElement | HTMLButtonElement>
-    >
-  ) => void
-  onPrev?: (event: CalendarNavigationEvent) => void
-  onNext?: (event: CalendarNavigationEvent) => void
-  onKeyDown?: (
-    event: React.KeyboardEvent<HTMLTableElement | HTMLButtonElement>,
-    tableRef: React.MutableRefObject<HTMLTableElement>,
-    nr: number
-  ) => void
-  /**
-   * To define the locale used in the calendar. Needs to be an `date-fns` "v2" locale object, like `import enLocale from &#39;date-fns/locale/en-GB&#39;`. Defaults to `nb-NO`.
-   */
-  locale?: InternalLocale
-  rtl?: boolean
-  isRange?: boolean
-  resetDate?: boolean
-}
+> &
+  Pick<ContextProps, 'dateFnsLocale'> & {
+    id?: string
+    nr?: number
+    /**
+     * To display what month should be shown in the first calendar by default. Defaults to the `date` respective `startDate`.
+     */
+    month?: Date
+    prevBtn?: boolean
+    nextBtn?: boolean
+    titleFormat?: string
+    dayOfWeekFormat?: string
+    firstDayOfWeek?: string
+    hideNav?: boolean
+    hideDays?: boolean
+    onlyMonth?: boolean
+    hideNextMonthWeek?: boolean
+    noAutoFocus?: boolean
+    onHover?: (day: Date) => void
+    onSelect?: (
+      event: DatePickerChangeEvent<
+        | React.MouseEvent<HTMLSpanElement>
+        | React.KeyboardEvent<HTMLTableElement | HTMLButtonElement>
+      >
+    ) => void
+    onPrev?: (event: CalendarNavigationEvent) => void
+    onNext?: (event: CalendarNavigationEvent) => void
+    onKeyDown?: (
+      event: React.KeyboardEvent<HTMLTableElement | HTMLButtonElement>,
+      tableRef: React.MutableRefObject<HTMLTableElement>,
+      nr: number
+    ) => void
+    /**
+     * To define the locale used in the calendar. Needs to be an `date-fns` "v2" locale object, like `import enLocale from &#39;date-fns/locale/en-GB&#39;`. Defaults to `nb-NO`.
+     */
+    locale?: InternalLocale
+    rtl?: boolean
+    isRange?: boolean
+    resetDate?: boolean
+  }
 
 type DayObject = {
   date: Date
@@ -197,13 +192,24 @@ function DatePickerCalendar(restOfProps: DatePickerCalendarProps) {
     noAutoFocus,
     hideNextMonthWeek,
     onlyMonth,
+    dateFnsLocale,
   } = props
 
   const listRef = useRef<React.ElementRef<'table'>>()
   const labelRef = useRef<HTMLLabelElement>()
   const days = useRef<Record<string, Array<CalendarDay>>>({})
   const cache = useRef<Record<string, CalendarDay[][]>>({})
 
+  // Easy to access objects containing the only (in our case) needed functions for date-fns format
+  const locales = useMemo<CalendarLocales>(() => {
+    return {
+      'nb-NO': { localize: nbLocalize, formatLong: nbFormatLong },
+      'en-GB': { localize: enLocalize, formatLong: gbFormatLong },
+      'en-US': { localize: enLocalize, formatLong: enFormatLong },
+      ...dateFnsLocale,
+    }
+  }, [dateFnsLocale])
+
   useEffect(() => {
     if (!noAutoFocus && nr === 0) {
       if (listRef.current) {

diff --git a/packages/dnb-eufemia/src/components/date-picker/DatePickerRange.tsx b/packages/dnb-eufemia/src/components/date-picker/DatePickerRange.tsx
@@ -17,13 +17,15 @@ import DatePickerCalendar, {
 import DatePickerContext from './DatePickerContext'
 import { DatePickerDates } from './hooks/useDates'
 import { DatePickerChangeEvent } from './DatePickerProvider'
+import { ContextProps } from '../../shared/Context'
 
 export type DatePickerRangeViews = number | Record<string, unknown>[]
 
 export type DatePickerRangeProps = Omit<
   React.HTMLProps<HTMLElement>,
   'onChange'
 > &
+  Pick<ContextProps, 'dateFnsLocale'> &
   DatePickerCalendarProps & {
     id?: string
     isRange?: boolean