diff --git a/packages/dnb-eufemia/src/components/date-picker/DatePicker.js b/packages/dnb-eufemia/src/components/date-picker/DatePicker.js
index 013d267cfee..df6a2b739b6 100644
--- a/packages/dnb-eufemia/src/components/date-picker/DatePicker.js
+++ b/packages/dnb-eufemia/src/components/date-picker/DatePicker.js
@@ -466,12 +466,20 @@ export default class DatePicker extends React.PureComponent {
}
render() {
+ const {
+ lang,
+ locale: { code },
+ } = this.props
+
// use only the props from context, who are available here anyway
const props = extendPropsWithContextInClassComponent(
this.props,
DatePicker.defaultProps,
{ skeleton: this.context?.skeleton },
- this.context.getTranslation(this.props).DatePicker,
+ this.context.getTranslation({
+ lang,
+ locale: code,
+ }).DatePicker,
// Deprecated – can be removed in v11
pickFormElementProps(this.context?.FormRow),
pickFormElementProps(this.context?.formElement),
diff --git a/packages/dnb-eufemia/src/components/date-picker/__tests__/DatePicker.test.tsx b/packages/dnb-eufemia/src/components/date-picker/__tests__/DatePicker.test.tsx
index 761d721460f..5f6080e63b9 100644
--- a/packages/dnb-eufemia/src/components/date-picker/__tests__/DatePicker.test.tsx
+++ b/packages/dnb-eufemia/src/components/date-picker/__tests__/DatePicker.test.tsx
@@ -13,6 +13,7 @@ import addDays from 'date-fns/addDays'
import addMonths from 'date-fns/addMonths'
import getDaysInMonth from 'date-fns/getDaysInMonth'
import isWeekend from 'date-fns/isWeekend'
+import enLocale from 'date-fns/locale/en-GB'
import {
toRange,
dayOffset,
@@ -1290,6 +1291,35 @@ describe('DatePicker component', () => {
expect(element.classList).toContain('dnb-date-picker--opened')
})
+ it('renders correct placeholder when setting locale', () => {
+ const props: DatePickerProps = {}
+
+ render()
+
+ const dayElem = document.querySelectorAll(
+ 'input.dnb-date-picker__input--day'
+ )[0] as HTMLInputElement
+ const monthElem = document.querySelectorAll(
+ 'input.dnb-date-picker__input--month'
+ )[0] as HTMLInputElement
+ const yearElem = document.querySelectorAll(
+ 'input.dnb-date-picker__input--year'
+ )[0] as HTMLInputElement
+
+ const seperator1 = document.querySelectorAll(
+ '.dnb-date-picker--separator'
+ )[0]
+ const seperator2 = document.querySelectorAll(
+ '.dnb-date-picker--separator'
+ )[0]
+
+ expect(dayElem.value).toBe('dd')
+ expect(monthElem.value).toBe('mm')
+ expect(yearElem.value).toBe('yyyy')
+ expect(seperator1.textContent).toBe('/')
+ expect(seperator2.textContent).toBe('/')
+ })
+
it('has to react on keydown events', async () => {
render(
{
>
)
}
+
+export const LocalePropExample = () => {
+ return (
+ <>
+
+ {/*
+
+ */}
+ >
+ )
+}