Feature Request: Global Date Format

[gtolarc]

I wish there was a date format in the collections-timestamps option and the date field option.

Perhaps the following codes are involved.
https://github.com/payloadcms/payload/blob/master/src/admin/components/views/Account/Default.tsx#L141
https://github.com/payloadcms/payload/blob/master/src/admin/components/views/collections/Edit/Default.tsx#L185
https://github.com/payloadcms/payload/blob/master/src/admin/components/views/collections/List/Cell/field-types/Date/index.tsx#L6

[jmikrut]

Hey @gtolarc — all dates are formatted as full timestamps when saved in the database, but you can actually set which date format you'd like date fields to display in.

We use react-datepicker under the hood, and all of its props are supported. So, you can restrict date field types to only show time, or only show day, etc. just by configuring it appropriately.

As for the collection timestamps, what would the reason be that you'd like to change the way that those display? Those are created by Mongoose and, like the date field, they save a full timestamp to the database but when you actually go to use them, you can format them however you'd like (only show day, only show time, etc.) on the frontend of your apps.

Let me know if I am misunderstanding the request here. Thank you!

[gtolarc]

In the case of timestamps, it seems that the format is hardcoded as just div, not react-datepicker. Also date field format is hardcoded as div in list cell. I want to change these parts. @jmikrut

[JarrodMFlesch]

@jmikrut, @gtolarc is referring to the admin UI, he linked where it is hardcoded in the admin UI. Could expose a collection timestamp option on the collection config, create a date util function and pass in the config option or fallback to the default MMMM do yyyy, h:mm a

[jmikrut]

OK so with the timestamps themselves:

Can I ask your reason as to why you would want to change the format of how these are output? As these are literally to describe when the document was created and last modified, the currently displayed format seems to be universally applicable, at least in my opinion.

But - I can totally understand your reasoning as to why you'd like to change the way that the List cell is displayed. To do that, you can render a custom component for your field(s) that displays the data however you'd like.

Like this, for example, to only show the time:

{
  type: 'date',
  name: 'date',
  admin: {
    components: {
      cell: ({ cellData }) => cellData ? format(new Date(cellData), 'h:mm a') : ''
     }
  }
}

I've pictured this above using the date-fns/format utility which would have to be imported obviously.

What do you think? Does this serve your purpose?

[jmikrut]

Update—

I think we could pretty easily add a global date format control that would take effect throughout the entire Admin panel. That way dates could be better formatted based on locale and could be customized throughout the whole UI.

I think it would be best set on the global level (not per collection). Thoughts?

[Ontopic]

Sounds good :) Anyone on this?

[jmikrut]

We can slate this one in for sure. Will report back shortly!

[denolfe]

This feature has been released in 0.6.7. There is now a dateFormat property within admin on the Payload config that can be set to any valid date-fns format.

https://payloadcms.com/docs/admin/overview#admin-options

@Ontopic @gtolarc

[Ontopic]

Was secretly already using it in my local build ;) Nice to have it released though. Gives a lot more localised feel to editors