fix: formats date when useAsTitle

src/admin/components/elements/DeleteDocument/index.tsx

@@ -21,6 +21,7 @@ const DeleteDocument: React.FC<Props> = (props) => {
     title: titleFromProps,
     id,
     buttonId,
+    collection,
     collection: {
       admin: {
         useAsTitle,
@@ -38,7 +39,7 @@ const DeleteDocument: React.FC<Props> = (props) => {
   const { toggleModal } = useModal();
   const history = useHistory();
   const { t, i18n } = useTranslation('general');
-  const title = useTitle(useAsTitle) || id;
+  const title = useTitle(useAsTitle, collection.slug) || id;
   const titleToRender = titleFromProps || title;
 
   const modalSlug = `delete-${id}`;

src/admin/components/elements/RenderTitle/index.tsx

@@ -8,12 +8,12 @@ const baseClass = 'render-title';
 const RenderTitle: React.FC<Props> = (props) => {
   const {
     useAsTitle,
+    collection,
     title: titleFromProps,
     data,
     fallback = '[untitled]',
   } = props;
-
-  const titleFromForm = useTitle(useAsTitle);
+  const titleFromForm = useTitle(useAsTitle, collection);
 
   let title = titleFromForm;
   if (!title) title = data?.id;

src/admin/components/elements/RenderTitle/types.ts

@@ -1,8 +1,9 @@
 export type Props = {
-  useAsTitle?: string,
+  useAsTitle?: string
   data?: {
-    id?: string,
-  },
-  title?: string,
-  fallback?: string,
+    id?: string
+  }
+  title?: string
+  fallback?: string
+  collection?: string
 }

src/admin/components/views/Account/Default.tsx

@@ -90,7 +90,12 @@ const DefaultAccount: React.FC<Props> = (props) => {
               <div className={`${baseClass}__edit`}>
                 <Gutter className={`${baseClass}__header`}>
                   <h1>
-                    <RenderTitle {...{ data, useAsTitle, fallback: `[${t('general:untitled')}]` }} />
+                    <RenderTitle
+                      data={data}
+                      collection={collection.slug}
+                      useAsTitle={useAsTitle}
+                      fallback={`[${t('general:untitled')}]`}
+                    />
                   </h1>
                   <Auth
                     useAPIKey={auth.useAPIKey}

src/admin/components/views/collections/Edit/Default.tsx

@@ -119,7 +119,12 @@ const DefaultEditView: React.FC<Props> = (props) => {
                   {customHeader && customHeader}
                   {!customHeader && (
                     <h1>
-                      <RenderTitle {...{ data, useAsTitle, fallback: `[${t('untitled')}]` }} />
+                      <RenderTitle
+                        data={data}
+                        collection={collection.slug}
+                        useAsTitle={useAsTitle}
+                        fallback={`[${t('untitled')}]`}
+                      />
                     </h1>
                   )}
                 </header>

src/admin/components/views/collections/Edit/SetStepNav.tsx

@@ -26,7 +26,7 @@ export const SetStepNav: React.FC<{
   const { t, i18n } = useTranslation('general');
   const { routes: { admin } } = useConfig();
 
-  const title = useTitle(useAsTitle);
+  const title = useTitle(useAsTitle, collection.slug);
 
   useEffect(() => {
     const nav: StepNavItem[] = [{

src/admin/hooks/useTitle.tsx

@@ -1,8 +1,26 @@
+import { format } from 'date-fns';
+import { useRelatedCollections } from '../components/forms/field-types/Relationship/AddNew/useRelatedCollections';
 import { useFormFields } from '../components/forms/Form/context';
+import { useConfig } from '../components/utilities/Config';
 
-const useTitle = (useAsTitle: string): string => {
+const useTitle = (useAsTitle: string, collection: string): string => {
   const titleField = useFormFields(([fields]) => fields[useAsTitle]);
-  return titleField?.value as string;
+  const value: string = titleField?.value as string || '';
+
+  const { admin: { dateFormat: dateFormatFromConfig } } = useConfig();
+  const collectionConfig = useRelatedCollections(collection)?.[0];
+  const fieldConfig = collectionConfig?.fields?.find((field) => 'name' in field && field?.name === useAsTitle);
+
+  const isDate = fieldConfig?.type === 'date';
+
+  let title = value;
+
+  if (isDate && value) {
+    const dateFormat = fieldConfig?.admin?.date?.displayFormat || dateFormatFromConfig;
+    title = format(new Date(value), dateFormat);
+  }
+
+  return title;
 };
 
 export default useTitle;