Use the user's locale to determine the format of the date in the time…

…stamp field's view (#6918)

.changeset/dirty-lemons-wash.md

@@ -0,0 +1,5 @@
+---
+'@keystone-next/keystone': patch
+---
+
+The format of the date shown in the `timestamp` field in the Admin UI now uses the user's locale

.changeset/poor-forks-drive.md

@@ -0,0 +1,5 @@
+---
+'@keystone-ui/fields': patch
+---
+
+The format of the date shown in the `DatePicker` now uses the user's locale

design-system/packages/fields/src/DatePicker/index.tsx

@@ -6,7 +6,7 @@ import FocusLock from 'react-focus-lock';
 import { jsx } from '@keystone-ui/core';
 import { PopoverDialog, useControlledPopover } from '@keystone-ui/popover';
 
-import { formatDMY, formatDateType } from '../utils/dateFormatters';
+import { formatDate, formatDateType, dateFormatPlaceholder } from '../utils/dateFormatters';
 import { DateType } from '../types';
 import { Calendar } from './Calendar';
 import { InputButton } from './components/InputButton';
@@ -83,7 +83,7 @@ export const DatePicker = ({
   );
 
   const selectedDay = new Date(value as string);
-  const formattedDate: DateInputValue = value ? formatDMY(new Date(value)) : undefined;
+  const formattedDate: DateInputValue = value ? formatDate(new Date(value)) : undefined;
 
   return (
     <Fragment>
@@ -105,7 +105,7 @@ export const DatePicker = ({
         // todo - magic number - align instead to parent Field ?
         style={{ minWidth: 200 }}
       >
-        {formattedDate || 'dd/mm/yyyy'}
+        {formattedDate || dateFormatPlaceholder}
       </InputButton>
       <PopoverDialog arrow={arrow} isVisible={isOpen} ref={dialog.ref} {...dialog.props}>
         <FocusLock autoFocus returnFocus disabled={!isOpen}>

design-system/packages/fields/src/utils/dateFormatters.ts

@@ -1,4 +1,4 @@
-import { format, formatISO } from 'date-fns';
+import { formatISO } from 'date-fns';
 import { DateType } from '../types';
 
 /**
@@ -8,10 +8,25 @@ export const formatDateType = (date: Date): DateType => {
   return formatISO(date, { representation: 'date' });
 };
 
-/**
- * Format day, month, year, like "Dec 01 2010" as "12/01/2010"
- * Note, subject to localisation, such as Jan 02 2009, can read 02/01/2009.
- *
- * @usage formatDMY(new Date('2019-09-18T19:00:52')) => "09/18/2019"
- */
-export const formatDMY = (date: Date): string => format(date, 'MM/dd/yyyy');
+// undefined means we'll use the user's locale
+const formatter = new Intl.DateTimeFormat(undefined, {
+  dateStyle: 'short',
+});
+
+export const formatDate = (date: Date): string => formatter.format(date);
+
+export const dateFormatPlaceholder = formatter
+  .formatToParts(new Date())
+  .map(x => {
+    if (x.type === 'day') {
+      return 'dd';
+    }
+    if (x.type === 'month') {
+      return 'mm';
+    }
+    if (x.type === 'year') {
+      return 'yyyy';
+    }
+    return x.value;
+  })
+  .join('');