date-fns: How to format dates for multiple languages?

3.4k Views Asked by At

I'm using date-fns in my React web app, and support multiple languages (English, French, and Spanish). I want to display the date in a way that makes sense to users of any of these three languages, and right now I do it like this:

import en from 'date-fns/locale/en';
import fr from 'date-fns/locale/fr';
import es from 'date-fns/locale/es';
import { format } from 'date-fns';
...
const locale = fr; // or en, or es
format(new Date(), 'MMMM d, yyyy h:mm a', { locale })

For English this gives April 14, 2023 1:40 PM

For French this gives avril 14, 2023 1:40 PM

For Spanish this gives abril 14, 2023 1:40 PM

The Problem: Even though this is translating the individual terms, it's still formatting them all the same way. I don't know if avril 14, 2023 1:40 PM is the correct order to put the terms in in French.

What I Want To Know: Is there a way to just print the date in a way that makes sense for the chosen language, rather than hard-coding a format?

0

There are 0 best solutions below