fix(DatePicker): renders mask_placeholder based on locale

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),

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(<DatePicker {...props} show_input={true} locale={enLocale} />)
+
+    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(
       <DatePicker

packages/dnb-eufemia/src/components/date-picker/stories/DatePicker.stories.tsx

@@ -544,3 +544,14 @@ export const GlobalStatusExample = () => {
     </>
   )
 }
+
+export const LocalePropExample = () => {
+  return (
+    <>
+      <DatePicker show_input={true} locale={enLocale} />
+      {/* <Provider locale="en-GB">
+        <DatePicker show_input={true} />
+      </Provider> */}
+    </>
+  )
+}