diff --git a/packages/dnb-eufemia/src/components/date-picker/DatePicker.tsx b/packages/dnb-eufemia/src/components/date-picker/DatePicker.tsx index 18213a06c26..fcabc7f0211 100644 --- 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) && ( -} -// 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 } export type CalendarNavigationEvent = { @@ -82,45 +76,46 @@ export type CalendarNavigationEvent = { export type DatePickerCalendarProps = Omit< React.HTMLProps, '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 - | React.KeyboardEvent - > - ) => void - onPrev?: (event: CalendarNavigationEvent) => void - onNext?: (event: CalendarNavigationEvent) => void - onKeyDown?: ( - event: React.KeyboardEvent, - tableRef: React.MutableRefObject, - nr: number - ) => void - /** - * To define the locale used in the calendar. Needs to be an `date-fns` "v2" locale object, like `import enLocale from 'date-fns/locale/en-GB'`. Defaults to `nb-NO`. - */ - locale?: InternalLocale - rtl?: boolean - isRange?: boolean - resetDate?: boolean -} +> & + Pick & { + 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 + | React.KeyboardEvent + > + ) => void + onPrev?: (event: CalendarNavigationEvent) => void + onNext?: (event: CalendarNavigationEvent) => void + onKeyDown?: ( + event: React.KeyboardEvent, + tableRef: React.MutableRefObject, + nr: number + ) => void + /** + * To define the locale used in the calendar. Needs to be an `date-fns` "v2" locale object, like `import enLocale from 'date-fns/locale/en-GB'`. Defaults to `nb-NO`. + */ + locale?: InternalLocale + rtl?: boolean + isRange?: boolean + resetDate?: boolean + } type DayObject = { date: Date @@ -197,6 +192,7 @@ function DatePickerCalendar(restOfProps: DatePickerCalendarProps) { noAutoFocus, hideNextMonthWeek, onlyMonth, + dateFnsLocale, } = props const listRef = useRef>() @@ -204,6 +200,16 @@ function DatePickerCalendar(restOfProps: DatePickerCalendarProps) { const days = useRef>>({}) const cache = useRef>({}) + // Easy to access objects containing the only (in our case) needed functions for date-fns format + const locales = useMemo(() => { + 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 index 8f16bace6b2..a684cea17a7 100644 --- a/packages/dnb-eufemia/src/components/date-picker/DatePickerRange.tsx +++ b/packages/dnb-eufemia/src/components/date-picker/DatePickerRange.tsx @@ -17,6 +17,7 @@ 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[] @@ -24,6 +25,7 @@ export type DatePickerRangeProps = Omit< React.HTMLProps, 'onChange' > & + Pick & DatePickerCalendarProps & { id?: string isRange?: boolean