diff --git a/package.json b/package.json
index 883d65fbad..5f3bae8afc 100644
--- a/package.json
+++ b/package.json
@@ -161,7 +161,7 @@
     "react": "^18.2.0",
     "react-animate-height": "^2.1.2",
     "react-beautiful-dnd": "^13.1.1",
-    "react-datepicker": "^3.8.0",
+    "react-datepicker": "^4.10.0",
     "react-diff-viewer": "^3.1.1",
     "react-dom": "^18.2.0",
     "react-helmet": "^6.1.0",
@@ -244,7 +244,7 @@
     "@types/qs-middleware": "^1.0.1",
     "@types/react": "^18.0.26",
     "@types/react-beautiful-dnd": "^13.1.3",
-    "@types/react-datepicker": "^3.1.8",
+    "@types/react-datepicker": "^4.8.0",
     "@types/react-dom": "^18.0.10",
     "@types/react-helmet": "^6.1.6",
     "@types/react-router-dom": "^5.3.3",
diff --git a/src/admin/components/elements/DatePicker/DatePicker.tsx b/src/admin/components/elements/DatePicker/DatePicker.tsx
index 214cf7b88e..0311a9ad24 100644
--- a/src/admin/components/elements/DatePicker/DatePicker.tsx
+++ b/src/admin/components/elements/DatePicker/DatePicker.tsx
@@ -1,5 +1,7 @@
 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 CalendarIcon from '../../icons/Calendar';
 import XIcon from '../../icons/X';
 import { Props } from './types';
@@ -9,12 +11,19 @@ import './index.scss';
 
 const baseClass = 'date-time-picker';
 
+const formattedLocales = {
+  en: 'enUS',
+  my: 'enUS', // Burmese is not currently supported
+  ua: 'uk',
+  zh: 'zhCN',
+};
+
 const DateTime: React.FC<Props> = (props) => {
   const {
     value,
     onChange,
     displayFormat,
-    pickerAppearance = 'dayAndTime',
+    pickerAppearance,
     minDate,
     maxDate,
     monthsToShow = 1,
@@ -26,12 +35,23 @@ const DateTime: React.FC<Props> = (props) => {
     placeholder: placeholderText,
   } = props;
 
+  let currentLocale = useLocale();
+  currentLocale = formattedLocales[currentLocale] || currentLocale;
+
+  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) {
+  if (dateTimeFormat === undefined && pickerAppearance) {
     if (pickerAppearance === 'dayAndTime') dateTimeFormat = 'MMM d, yyy h:mm a';
     else if (pickerAppearance === 'timeOnly') dateTimeFormat = 'h:mm a';
-    else if (pickerAppearance === 'monthOnly') dateTimeFormat = 'MM/yyyy';
+    else if (pickerAppearance === 'dayOnly') dateTimeFormat = 'dd';
+    else if (pickerAppearance === 'monthOnly') dateTimeFormat = 'MMMM';
     else dateTimeFormat = 'MMM d, yyy';
   }
 
@@ -77,11 +97,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>