fix: enables locales with date field

src/admin/components/elements/DatePicker/DatePicker.tsx

@@ -1,5 +1,8 @@
 import React from 'react';
-import DatePicker from 'react-datepicker';
+import DatePicker, { registerLocale } from 'react-datepicker';
+import * as Locales from 'date-fns/locale';
+import { useLocale } from '../../utilities/Locale';
+import { formattedLocales } from './formattedLocales';
 import CalendarIcon from '../../icons/Calendar';
 import XIcon from '../../icons/X';
 import { Props } from './types';
@@ -26,6 +29,15 @@ const DateTime: React.FC<Props> = (props) => {
     placeholder: placeholderText,
   } = props;
 
+  const currentLocale = formattedLocales[useLocale()];
+
+  try {
+    const locale = Locales[currentLocale];
+    registerLocale(currentLocale, locale);
+  } catch (e) {
+    console.warn(`Could not find DatePicker locale for ${currentLocale}`);
+  }
+
   let dateTimeFormat = displayFormat;
 
   if (dateTimeFormat === undefined) {
@@ -77,11 +89,13 @@ const DateTime: React.FC<Props> = (props) => {
         <DatePicker
           {...dateTimePickerProps}
           onChange={(val) => onChange(val as Date)}
-          popperModifiers={{
-            preventOverflow: {
+          locale={currentLocale || 'en-US'}
+          popperModifiers={[
+            {
+              name: 'preventOverflow',
               enabled: true,
             },
-          }}
+          ]}
         />
       </div>
     </div>

src/admin/components/elements/DatePicker/formattedLocales.ts

@@ -0,0 +1,25 @@
+// Locales must match the locales from date-fns
+// https://github.com/date-fns/date-fns/blob/main/src/locale/
+
+export const formattedLocales = {
+  cs: 'cs',
+  de: 'de',
+  en: 'enUS',
+  es: 'es',
+  fr: 'fr',
+  hr: 'hr',
+  it: 'it',
+  ja: 'ja',
+  my: 'enUS', // Burmese is not currently supported
+  nb: 'nb',
+  nl: 'nl',
+  pl: 'pl',
+  pt: 'pt',
+  ru: 'ru',
+  sv: 'sv',
+  th: 'th',
+  tr: 'tr',
+  ua: 'uk',
+  vi: 'vi',
+  zh: 'zhCN',
+};