Merge pull request #688 from strapi/fix/datepicker-locale

DatePicker: Allow to pass in a locale

Author: HichamELBSI

packages/strapi-design-system/src/DatePicker/DatePicker.js

@@ -8,13 +8,15 @@ import { DatePickerButton, DatePickerWrapper, IconBox } from './components';
 import { DatePickerCalendar } from './DatePickerCalendar';
 import { formatDate } from './utils/formatDate';
 import { useId } from '../helpers/useId';
+import { getDefaultLocale } from '../helpers/getDefaultLocale';
 
 export const DatePicker = ({
   ariaLabel,
   initialDate,
   selectedDate,
   onChange,
   label,
+  locale: defaultLocale,
   selectedDateLabel,
   onClear,
   clearLabel,
@@ -26,7 +28,8 @@ export const DatePicker = ({
   const [visible, setVisible] = useState(false);
   const inputRef = useRef(null);
   const datePickerButtonRef = useRef(null);
-  const formattedDate = selectedDate ? formatDate(selectedDate) : '';
+  const locale = defaultLocale || getDefaultLocale();
+  const formattedDate = selectedDate ? formatDate(selectedDate, locale) : '';
 
   const toggleVisibility = () => {
     if (disabled) return;
@@ -61,7 +64,7 @@ export const DatePicker = ({
           <DatePickerButton
             ref={datePickerButtonRef}
             onClick={toggleVisibility}
-            aria-label={selectedDate ? selectedDateLabel(formatDate(selectedDate)) : label}
+            aria-label={selectedDate ? selectedDateLabel(formatDate(selectedDate, locale)) : label}
             type="button"
             aria-disabled={disabled}
           >
@@ -117,6 +120,7 @@ DatePicker.propTypes = {
   id: PropTypes.string,
   initialDate: PropTypes.instanceOf(Date),
   label: PropTypes.string,
+  locale: PropTypes.string,
   maxDate: PropTypes.instanceOf(Date),
   minDate: PropTypes.instanceOf(Date),
   onChange: PropTypes.func.isRequired,

packages/strapi-design-system/src/DatePicker/DatePicker.stories.mdx

@@ -142,6 +142,31 @@ By passing in `minDate` or `maxDate` it is possible to define the range of years
   </Story>
 </Canvas>
 
+## Locales
+
+<Canvas>
+  <Story name="locales">
+    {() => {
+      const [date, setDate] = useState();
+      return (
+        <DatePicker
+          onChange={setDate}
+          selectedDate={date}
+          label="Date picker"
+          name="datepicker"
+          clearLabel={'Clear the datepicker'}
+          onClear={() => setDate(undefined)}
+          placeholder="03/01/1970"
+          locale="de"
+          selectedDateLabel={(formattedDate) => `Date picker, current is ${formattedDate}`}
+          minDate={new Date(2000, 1, 1)}
+          maxDate={new Date(2040, 1, 1)}
+        />
+      );
+    }}
+  </Story>
+</Canvas>
+
 ## Props
 
 <ArgsTable of={DatePicker} />

packages/strapi-design-system/src/DatePicker/__tests__/DatePicker.spec.js

@@ -0,0 +1,39 @@
+import * as React from 'react';
+import { render, screen } from '@testing-library/react';
+
+import { DatePicker } from '../DatePicker';
+
+import { lightTheme } from '../../themes';
+import { ThemeProvider } from '../../ThemeProvider';
+
+describe('DatePicker', () => {
+  describe('Locale prop', () => {
+    const renderDate = (locale) =>
+      render(
+        <ThemeProvider theme={lightTheme}>
+          <DatePicker
+            label="date"
+            locale={locale}
+            selectedDateLabel={(formattedDate) => `Date picker, current is ${formattedDate}`}
+            selectedDate={new Date('Tue Sep 06 2022')}
+          />
+        </ThemeProvider>,
+      );
+
+    it('should format by EN locale by default', () => {
+      renderDate();
+
+      const input = screen.getByRole('textbox');
+
+      expect(input.value).toMatchInlineSnapshot('"9/6/2022"');
+    });
+
+    it('should format by the DE locale when passed', () => {
+      renderDate('de-DE');
+
+      const input = screen.getByRole('textbox');
+
+      expect(input.value).toMatchInlineSnapshot('"6.9.2022"');
+    });
+  });
+});

packages/strapi-design-system/src/DatePicker/utils/formatDate.js

@@ -1,5 +1,5 @@
-export const formatDate = (date) => {
-  const langFormatter = new Intl.DateTimeFormat();
+export const formatDate = (date, locale) => {
+  const langFormatter = new Intl.DateTimeFormat(locale);
 
   return langFormatter.format(date);
 };