httpete
httpete

Reputation: 2993

i18next to do formatting of dates, numbers with the Intl Api

On this link, https://www.i18next.com/formatting.html it says that we can use the Intl api for formatting, but doesn't show how to use it.

How can we configure i18next to use the Intl api for all dates, times and number formats? The example says it should be easy but doesn't show a reference example.

Upvotes: 2

Views: 4705

Answers (2)

CoatedMoose
CoatedMoose

Reputation: 4238

It's been a few years since this question was asked, and now i18next relies on the native implementation of the Intl API for datetime (and several formatters). No need for a custom interpolation function.

Here is the example it gives for how to use the API.

// JSON
{
  "intlDateTime": "On the {{val, datetime}}",
}

i18next.t('intlDateTime', { val: new Date(Date.UTC(2012, 11, 20, 3, 0, 0)) });
// --> On the 12/20/2012
i18next.t('intlDateTime',
          {
            val: new Date(Date.UTC(2012, 11, 20, 3, 0, 0)),
            formatParams: {
              val: { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' },
            },
          });
// --> On the Thursday, December 20, 2012

Upvotes: 0

jamuhl
jamuhl

Reputation: 4498

You could:

i18next.init({
    interpolation: {
        format: function(value, format, lng) {
            if (format === 'intlDate') return new Intl.DateTimeFormat().format(value); // -> "12/20/2012" if run in en-US locale with time zone America/Los_Angeles
            return value;
        }
    }
});

json: key: today is the {{now, intlDate}}

call t: i18next.t('key', { now: new Date() })

Upvotes: 3

Related Questions