# General Translation Knowledge Base: How do I format numbers, dates and currencies for each locale? URL: https://generaltranslation.com/en-GB/kb/format-numbers-dates-currencies.mdx Docs index: https://generaltranslation.com/llms.txt Description: Format each value when the page renders, using the reader's locale and JavaScript's Intl API, and keep it out of the translated sentence. General Translation's ``, ``, `` and `` components do both inside a ``, so one translation serves every value. Category: Locale Formatting Last updated: 2026-10-21 Authors: Kevin Liu, Kevin Wu Published: 2026-10-21 Format each value at render time using the reader's locale and JavaScript's `Intl` API, which applies each locale's digit grouping, decimal mark, currency placement and date order: 12,450.75 euros is €12,450.75 in English and 12.450,75 € in German, and 4 August 2026 is 8/4/2026 in US English and 4.8.2026 in German. The sentence around the value is trickier. It is translated ahead of time, but the value only exists at render time, so each translation needs a slot for it. A date also depends on a time zone, so a server in UTC and a browser in Los Angeles can render different days for the same moment. ## Video The video is narrated in English, with English captions. [How do I format numbers, dates and currencies for each locale?](https://caxecubb9c64cezv.public.blob.vercel-storage.com/films/kb-format-numbers-dates-currencies.mp4) (45 secs) General Translation formats values for each locale with `Num`, `Currency` and `DateTime`. After `npx gt init`, `Num` groups digits and `Currency` formats an amount without converting it, `DateTime` formats dates and `RelativeTime` writes phrases such as three days ago, and `npx gt translate` writes the words around them in each language. ## Ways to format values for each locale | Approach | What it does well | What it leaves to you | | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------ | | JavaScript's `Intl` API alone | Formats numbers, currencies, dates and relative times according to each locale's conventions, built into the language | Translating every sentence that contains a value, in every language, and fitting the formatted value into each one | | An internationalisation (i18n) library's formatters ([`react-intl`](/kb/general-translation-vs-react-intl), `next-intl`, [`i18next`](/kb/general-translation-vs-i18next)) | Formats the value inside each translated message, such as `{total, number, ::currency/EUR}` in an ICU message | Writing each message in a keyed file for every language and keeping those files up to date | | A date library (`date-fns`, `Day.js`) | Formats and calculates dates with locale data you import per language | Numbers and currencies, loading each locale, and translating every sentence the date sits in | | General Translation ([``](/docs/react/reference/components/num), [``](/docs/react/reference/components/currency), [``](/docs/react/reference/components/datetime), and [``](/docs/react/reference/components/relative-time) inside [``](/docs/react/reference/components/t)) | Formats each value locally with `Intl` for the active locale; the sentence around it is translated once per language, with a slot for the value | Choosing each amount's currency code and pinning the locale, time zone and `baseDate` on server-rendered pages | Use `Intl` alone when a value stands on its own, such as in a price column. Use your i18n library's formatters when translators maintain your messages in keyed files, and a date library when you already rely on one for date calculations. Use General Translation's components when values sit inside sentences that ship in several languages and change with each release. ## Format values inside translated sentences General Translation's `gt-next`, `gt-react`, and the experimental `gt-tanstack-start` and `gt-react-native` ship one component per value type. To put a formatted value in a translated sentence: 1. Wrap the sentence in [``](/docs/react/reference/components/t). 2. Wrap each value in the component for its type: [``](/docs/react/reference/components/num) for numbers, percentages and units; [``](/docs/react/reference/components/currency) for an amount in an ISO 4217 currency (without converting it); [``](/docs/react/reference/components/datetime) for dates and times; and [``](/docs/react/reference/components/relative-time) for phrases such as '3 days ago'. ```tsx

Your total is {total}.

; ``` 3. Run [`npx gt translate`](/docs/cli/reference/commands/translate) to translate the sentence once per language. Each component keeps its value out of the translation and formats it locally with `Intl`, without sending it to the General Translation API. ## Server-rendered apps and Vue To avoid hydration errors in a server-rendered app, pin the locale and the `timeZone` option on [``](/docs/react/reference/components/datetime), and the locale and a shared `baseDate` on [``](/docs/react/reference/components/relative-time). [Vue apps](/docs/vue/guides/formatting-variables) get [``](/docs/vue/reference/components/num), [``](/docs/vue/reference/components/currency) and [``](/docs/vue/reference/components/datetime) from `gt-vue`. The [Formatting numbers and dates](/docs/react/guides/formatting-variables) guide sets out the full steps. ## Related questions - [How do I handle plurals in React?](https://generaltranslation.com/en-GB/kb/how-to-handle-plurals-in-react.mdx): Handle plurals in React by giving each language one sentence per plural form and picking it with that language's plural rules, since English has 2 forms, Russian has 4 and Arabic has 6. General Translation's `` component in gt-react and gt-next takes your source forms, and General Translation generates the forms each target language needs. - [How do I translate strings outside JSX?](https://generaltranslation.com/en-GB/kb/translate-strings-outside-jsx.mdx): Pass each string that isn't a JSX child, such as a placeholder or a module-scope constant, through a translation function where it renders. General Translation's useGT hook returns that function, and msg with useMessages translates constants defined outside a component. - [How do I translate conditional text in JSX?](https://generaltranslation.com/en-GB/kb/translate-conditional-jsx.mdx): Keep the sentence whole and translate every version of it, because a ternary splits it into fragments that lose their meaning and their place in each language's word order. General Translation does this with `` inside ``, which translates the sentence as one unit. - [How do I translate a React app?](https://generaltranslation.com/en-GB/kb/translate-react-app.mdx): Translating a React app means internationalising its components so they render in the user's language, then translating every string into each language you support. General Translation's gt-react translates JSX in place in the `` component, and npx gt translate writes one file per language. ## Previous and next questions - Previous question: [How do I add i18n to a Next.js App Router app?](https://generaltranslation.com/en-GB/kb/add-i18n-to-nextjs.mdx) - Next question: [How do I internationalise an app with Cursor or Claude Code?](https://generaltranslation.com/en-GB/kb/ai-agent-i18n-setup.mdx) ## Sitemap See the [Knowledge Base sitemap](https://generaltranslation.com/en-GB/kb/sitemap.md) for every article.