I18next: React i18next for formatting numbers and dates without translation

[piehouserat]

Hi!

Currently using i18next for translations within a React app, everything is working great 😃
Now have the task of displaying some dates and numbers according to the set language but without any translation required so simply if language is en-GB then I have a date prop that should look like 25/02/19 and in en-US would look like 02/25/19. Should I or can I even use i18next for this or should I use a separate library that will somehow have to be aware of i18next set language?

Martin

[jamuhl]

hope that helps: https://www.i18next.com/translation-function/formatting

[piehouserat]

Yeah I already had read that. All the examples there use formatting with some kind of translation key and text - I simply have a date or a number that I want to display without any required translation in the correct locale. It seems like it could be done with i18next in this way but I just wanted to know if i18next is the right candidate for this in terms of performance, etc

"key": "{{date, MM/DD/YYYY}}",

i18next.t('key', { date: new Date() }); // -> "02/12/2019"

[jamuhl]

Wouldn't have a big impact on performance - but for sure you can just call the momentjs, datejs, datefc whatever your using directly. Just make sure the lng is synced eg. using the event handler for language changes: https://www.i18next.com/overview/api#onlanguagechanged

[piehouserat]

Ok, in case it helps anyone else, this is what I've got at the moment:

interpolation: {
  format: (value, format, lng) => {
    if (format === 'intlDate') {
      return new Intl.DateTimeFormat(lng).format(value);
    }

    return value;
  }
},

formattedDate: '{{date, intlDate}}',

t('formattedDate', { date })

works nicely 👍