feat: date fns locales (#1108)

Author: KaneFreeman

cypress/utils/steps.ts

@@ -1,5 +1,5 @@
 import 'cypress-real-events';
-import format from 'date-fns/format';
+import { format } from 'date-fns/format';
 
 import { editorStatus, notifications, publishTypes, workflowStatus } from './constants';
 

packages/core/package.json

@@ -71,7 +71,7 @@
     "@mui/base": "5.0.0-beta.30",
     "@mui/material": "5.15.3",
     "@mui/system": "5.15.3",
-    "@mui/x-date-pickers": "6.18.6",
+    "@mui/x-date-pickers": "7.3.1",
     "@reduxjs/toolkit": "1.9.7",
     "@styled-icons/bootstrap": "10.47.0",
     "@styled-icons/fa-brands": "10.47.0",
@@ -97,7 +97,7 @@
     "common-tags": "1.8.2",
     "copy-text-to-clipboard": "3.2.0",
     "create-react-class": "15.7.0",
-    "date-fns": "2.30.0",
+    "date-fns": "3.6.0",
     "deepmerge": "4.3.1",
     "diacritics": "1.3.0",
     "escape-html": "1.0.3",

packages/core/src/components/collections/entries/EntryCard.tsx

@@ -1,6 +1,6 @@
 import { Info as InfoIcon } from '@styled-icons/material-outlined/Info';
-import format from 'date-fns/format';
-import parse from 'date-fns/parse';
+import { format } from 'date-fns/format';
+import { parse } from 'date-fns/parse';
 import React, { useEffect, useMemo, useState } from 'react';
 
 import useTranslate from '@staticcms/core/lib/hooks/useTranslate';

packages/core/src/lib/widgets/stringTemplate.ts

@@ -1,5 +1,5 @@
-import format from 'date-fns/format';
-import parse from 'date-fns/parse';
+import { format } from 'date-fns/format';
+import { parse } from 'date-fns/parse';
 import get from 'lodash/get';
 import trimEnd from 'lodash/trimEnd';
 import truncate from 'lodash/truncate';

packages/core/src/widgets/datetime/DateTimeControl.tsx

@@ -1,20 +1,20 @@
 import { unstable_useForkRef as useForkRef } from '@mui/utils';
-import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
+import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFnsV3';
 import { DatePicker } from '@mui/x-date-pickers/DatePicker';
 import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 import { TimePicker } from '@mui/x-date-pickers/TimePicker';
-import formatDate from 'date-fns/format';
-import parse from 'date-fns/parse';
-import parseISO from 'date-fns/parseISO';
+import { formatDate } from 'date-fns/format';
+import { parse } from 'date-fns/parse';
+import { parseISO } from 'date-fns/parseISO';
 import React, { useCallback, useMemo, useRef, useState } from 'react';
 
 import Field from '@staticcms/core/components/common/field/Field';
 import classNames from '@staticcms/core/lib/util/classNames.util';
 import { generateClassNames } from '@staticcms/core/lib/util/theming.util';
 import NowButton from './components/NowButton';
 import { DEFAULT_DATETIME_FORMAT } from './constants';
-import { useDatetimeFormats } from './datetime.util';
+import { getDateFnsLocale, useDatetimeFormats } from './datetime.util';
 import { localToUTC } from './utc.util';
 
 import type { DateTimeField, WidgetControlProps } from '@staticcms/core';
@@ -43,6 +43,7 @@ const DateTimeControl: FC<WidgetControlProps<string | Date, DateTimeField>> = ({
   errors,
   hasErrors,
   forSingleList,
+  config: { locale },
   onChange,
 }) => {
   const ref = useRef<HTMLInputElement | null>(null);
@@ -194,6 +195,8 @@ const DateTimeControl: FC<WidgetControlProps<string | Date, DateTimeField>> = ({
     rootRef,
   ]);
 
+  const dateLocale = useMemo(() => (locale ? getDateFnsLocale(locale) : undefined), [locale]);
+
   return (
     <Field
       inputRef={!open ? ref : undefined}
@@ -213,7 +216,11 @@ const DateTimeControl: FC<WidgetControlProps<string | Date, DateTimeField>> = ({
       wrapperClassName={classes.wrapper}
     >
       <div className={classes['inputs']}>
-        <LocalizationProvider key="localization-provider" dateAdapter={AdapterDateFns}>
+        <LocalizationProvider
+          key="localization-provider"
+          dateAdapter={AdapterDateFns}
+          adapterLocale={dateLocale}
+        >
           {dateTimePicker}
         </LocalizationProvider>
         <NowButton

packages/core/src/widgets/datetime/datetime.util.ts

@@ -1,3 +1,4 @@
+import * as Locales from 'date-fns/locale';
 import { useMemo } from 'react';
 
 import { isNotEmpty } from '@staticcms/core/lib/util/string.util';
@@ -9,6 +10,7 @@ import {
 } from './constants';
 
 import type { DateTimeField, DateTimeFormats } from '@staticcms/core';
+import type { Locale } from 'date-fns/locale';
 
 function getDisplayFormat(
   dateFormat: string | boolean,
@@ -87,3 +89,7 @@ export function useDatetimeFormats(field: DateTimeField | undefined): DateTimeFo
 export function useDatetimeFormats(field: DateTimeField | undefined): DateTimeFormats | undefined {
   return useMemo(() => getDatetimeFormats(field), [field]);
 }
+
+export function getDateFnsLocale(locale: string): Locale {
+  return (Locales as Record<string, Locale>)[locale] ?? Locales.enUS;
+}

packages/core/src/widgets/datetime/getDefaultValue.ts

@@ -1,4 +1,4 @@
-import format from 'date-fns/format';
+import { format } from 'date-fns/format';
 
 import { isNotNullish } from '@staticcms/core/lib/util/null.util';
 import { DEFAULT_DATETIME_FORMAT, DEFAULT_DATE_FORMAT, DEFAULT_TIME_FORMAT } from './constants';

packages/core/src/widgets/datetime/utc.util.ts

@@ -1,4 +1,4 @@
-import addMinutes from 'date-fns/addMinutes';
+import { addMinutes } from 'date-fns/addMinutes';
 
 export function localToUTC(dateTime: Date): Date {
   return addMinutes(dateTime.getTime(), getTimezoneOffset(dateTime));

packages/docs/package.json

@@ -18,7 +18,7 @@
     "@emotion/styled": "11.11.0",
     "@mui/icons-material": "5.15.3",
     "@mui/material": "5.15.3",
-    "date-fns": "2.30.0",
+    "date-fns": "3.6.0",
     "gray-matter": "4.0.3",
     "js-yaml": "4.1.0",
     "next": "14.0.4",

packages/docs/src/components/DateDisplay.tsx

@@ -1,6 +1,4 @@
-import addMinutes from 'date-fns/addMinutes';
-import format from 'date-fns/format';
-import parseISO from 'date-fns/parseISO';
+import { addMinutes, format, parseISO } from 'date-fns';
 import { useEffect, useState } from 'react';
 
 function formatDate(date: Date, dateFormat: string) {