From aefb655769e7998a44cef9f93a19e4aef24c50bb Mon Sep 17 00:00:00 2001 From: Jessica Boezwinkle Date: Mon, 6 Feb 2023 17:13:47 +0000 Subject: [PATCH 1/4] 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) => { 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) => { onChange(val as Date)} - popperModifiers={{ - preventOverflow: { + locale={currentLocale || 'en-US'} + popperModifiers={[ + { + name: 'preventOverflow', enabled: true, }, - }} + ]} /> 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', +}; From 090906c5595b79e2157a7191cbdb39c5df060a37 Mon Sep 17 00:00:00 2001 From: Jessica Boezwinkle Date: Mon, 6 Feb 2023 17:45:17 +0000 Subject: [PATCH 2/4] chore: adds datepicker types and updates datepicker version --- package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index 355afa8df4..d488915744 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", From 43e9c32ec698731b58d53cead4d531e828398117 Mon Sep 17 00:00:00 2001 From: Jessica Boezwinkle Date: Tue, 7 Feb 2023 10:45:12 +0000 Subject: [PATCH 3/4] chore: removes formatted locale list --- .../elements/DatePicker/DatePicker.tsx | 11 ++++++-- .../elements/DatePicker/formattedLocales.ts | 25 ------------------- 2 files changed, 9 insertions(+), 27 deletions(-) delete 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 cf4da9e735..720baca612 100644 --- a/src/admin/components/elements/DatePicker/DatePicker.tsx +++ b/src/admin/components/elements/DatePicker/DatePicker.tsx @@ -2,7 +2,6 @@ import React from 'react'; 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'; @@ -12,6 +11,13 @@ 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) => { const { value, @@ -29,7 +35,8 @@ const DateTime: React.FC = (props) => { placeholder: placeholderText, } = props; - const currentLocale = formattedLocales[useLocale()]; + let currentLocale = useLocale(); + currentLocale = formattedLocales[currentLocale] || currentLocale; try { const locale = Locales[currentLocale]; diff --git a/src/admin/components/elements/DatePicker/formattedLocales.ts b/src/admin/components/elements/DatePicker/formattedLocales.ts deleted file mode 100644 index 9837e5690f..0000000000 --- a/src/admin/components/elements/DatePicker/formattedLocales.ts +++ /dev/null @@ -1,25 +0,0 @@ -// 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', -}; From 3bc67e338bfcce9627487fff5d102c0f54dd1d42 Mon Sep 17 00:00:00 2001 From: Jessica Boezwinkle Date: Tue, 7 Feb 2023 17:42:56 +0000 Subject: [PATCH 4/4] chore: updates dateTimeFormat --- src/admin/components/elements/DatePicker/DatePicker.tsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/admin/components/elements/DatePicker/DatePicker.tsx b/src/admin/components/elements/DatePicker/DatePicker.tsx index 720baca612..0311a9ad24 100644 --- a/src/admin/components/elements/DatePicker/DatePicker.tsx +++ b/src/admin/components/elements/DatePicker/DatePicker.tsx @@ -23,7 +23,7 @@ const DateTime: React.FC = (props) => { value, onChange, displayFormat, - pickerAppearance = 'dayAndTime', + pickerAppearance, minDate, maxDate, monthsToShow = 1, @@ -47,10 +47,11 @@ const DateTime: React.FC = (props) => { 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'; }