From aefb655769e7998a44cef9f93a19e4aef24c50bb Mon Sep 17 00:00:00 2001
From: Jessica Boezwinkle <jessica@trbl.design>
Date: Mon, 6 Feb 2023 17:13:47 +0000
Subject: [PATCH] fix: enables locales with date field

---
 .../elements/DatePicker/DatePicker.tsx        | 22 +++++++++++++---
 .../elements/DatePicker/formattedLocales.ts   | 25 +++++++++++++++++++
 2 files changed, 43 insertions(+), 4 deletions(-)
 create mode 100644 src/admin/components/elements/DatePicker/formattedLocales.ts

diff --git a/src/admin/components/elements/DatePicker/DatePicker.tsx b/src/admin/components/elements/DatePicker/DatePicker.tsx
index 214cf7b88e..cf4da9e735 100644
--- a/src/admin/components/elements/DatePicker/DatePicker.tsx
+++ b/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>
diff --git a/src/admin/components/elements/DatePicker/formattedLocales.ts b/src/admin/components/elements/DatePicker/formattedLocales.ts
new file mode 100644
index 0000000000..9837e5690f
--- /dev/null
+++ b/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',
+};