change date format based on locale globally

[Notorious-Ali]

Hey everyone,

I'm working on a Payload CMS project that needs to display and input dates in different formats depending on the user's locale. For example, I want to display dates in "YYYY-MM-DD" format for English and "jYYYY/jMM/jDD" for Persian. (Jalali datefns for persian = https://www.npmjs.com/package/date-fns-jalali)

I've tried using the dateFormats property within the admin configuration, but I'm encountering some type errors. I'm not sure if I'm correctly defining the types for this property.

Here's a simplified version of my code:

export default buildConfig({
  // ... other configurations

  admin: {
    // ... other admin configurations

    dateFormat: {
      fa: ({ value }) => formatDate(new Date(value), 'jYYYY/jMM/jDD', { locale: dateFns }),
    },
  },

  // ... rest of the configuration
})

[jacobsfletch]

You're getting type errors here because the dateFormat property expects a string, not a function. This represents the pattern sent to the format function provided by date-fns itself. But it seems to me like you'd want to base dates on the user's current language, not locale. The language is what affects the UI within the admin panel.

That being said, this is done automatically for you when we invoke this function. Each translation that Payload provides already has a predefined pattern, including the Persian language. Do you have translations enabled in your config? This is done via the i18n property. Something like this:

{
  // ...
  i18n: {
    supportedLanguages: ['fa']
  }
}

I am, however, seeing that the fa language that we support does in fact use the fa-IR key, which uses the Gregorian calendar. Unless the date-fns module supports the Jalali calendar, I'm not sure this is currently possible. We do provide the ability the override the dateFNS key per language, but date-fns itself is deeply tied to the Gregorian date model.

We could potentially provide some mechanism for you to do this yourself in the future, completely bypassing date-fns altogether, but this is not currently possible. I could see the admin.dateFormat property supporting a function, which if provided, would allow you to use an alternative package such as date-fns-jalali. I have not looked into whether this is technically possible or not, but just an idea that might be worth exploring.