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 ( + <> + + {/* + + */} + + ) +}