2

I have an application with react-intl injected. Its bilingual - in English and in Polish so i represent dates with . When I represent let's say 12 April 2005 its:

  • 12.04.2005 in Polish

  • 04/12/2005 in English

It confuses everyone as people think about the second date as 4th December. Can i somehow format dates so in English it would be DD/MM/YYYY ?

jake-ferguson
  • 315
  • 3
  • 11
  • 32
  • Please note that the format MM/DD/YYYY is used by a minority of English speakers and is peculiar to the USA, not English speakers in general. Far better to use an unambiguos format that uses the month name like DD-MMM-YYYY (e.g. 12-Jul-2018) or MMMM D, YYYY (e.g. July 12, 2018). – RobG Jul 02 '18 at 14:27

2 Answers2

2

So, if the locale of your application is working fine, you can just use the FormattedDate component from react-intland it will display the date in the current format.

Assuming that the locale is in place, you'd only have to use it like this:

<FormattedDate
    value="12.04.2005"
    day="2-digit"
    month="2-digit"
    year="numeric"
/>

The FormattedDate component will use the locale of the application to format it to english or polish (or any other locale you set). Here is the reference in the doc

sergioviniciuss
  • 4,596
  • 3
  • 36
  • 50
  • 1
    i think he's asking how to overwrite en-US. not the default.... and seems FormattedDate is pretty bad with overwrite? not seeing example. – newBike Jul 29 '21 at 18:59
-1

There is not much to work with, but see if this helps:

let PolishDate = '12.04.2005';
let arr = PolishDate.split('.');
let EnglishDate = arr[1] + '/' + arr[0] + '/' + arr[2];
console.log(EnglishDate);
Suhas
  • 550
  • 4
  • 11
  • I could do this but with this library the date changes then the language changes, I cannot format it in such a way. I am looking for sth maybe included in this library... idk – jake-ferguson Jul 02 '18 at 12:02
  • what 'library' are you referring to? – Suhas Jul 02 '18 at 12:03
  • he is using react-intl, so react-intl already handle this by displaying the date format according to the current locale. – sergioviniciuss Jul 02 '18 at 13:54
  • @Periback—but where is the current locale sourced from? – RobG Jul 02 '18 at 14:26
  • you have to provide it to the intlProvider.. (through a switch button or through some environment settings that you get and define it...) but eventhough, react-intl has the addLocaleData that you need to call for each locale your app supports – sergioviniciuss Jul 02 '18 at 14:38
  • https://www.smashingmagazine.com/2017/01/internationalizing-react-apps/ is a good tutorial to start with react-intl :) – sergioviniciuss Jul 02 '18 at 14:42
  • @Periback—thanks, I think an important part is “*…implement a widget with which the user can change the language intuitively and that they can easily locate within a few seconds.*” – RobG Jul 02 '18 at 22:22
  • yes.. in my case, for example, it's a public website with different domains, so I don't need to have a switch button.. I just load the correct locale and json file with the labels based on an environment variable that tells me which environment I am.. Based on it, I set the locale to the intlProvider and load the correct json file with the labels for that specific locale – sergioviniciuss Jul 02 '18 at 22:29