useDateFormatter

Provides localized date formatting for the current locale. Automatically updates when the locale changes, and handles caching of the date formatter for performance.

Introduction#

useDateFormatter wraps a builtin browser Intl.DateTimeFormat object to provide a React Hook that integrates with the i18n system in React Aria. It handles formatting dates for the current locale, updating when the locale changes, and caching of date formatters for performance. See the Intl.DateTimeFormat docs for information on formatting options.

API#

Example#

This example displays the current date for two locales: USA, and Russia. Two instances of the CurrentDate component are rendered, using the I18nProvider to specify the locale to display.

import {I18nProvider, useDateFormatter} from '@react-aria/i18n';

function CurrentDate() {
  let formatter = useDateFormatter();

  return (
    <p>{formatter.format(new Date())}</p>
  );
}

<>
  <I18nProvider locale="en-US">
    <CurrentDate />
  </I18nProvider>
  <I18nProvider locale="ru-RU">
    <CurrentDate />
  </I18nProvider>
</>

import {
  I18nProvider,
  useDateFormatter
} from '@react-aria/i18n';

function CurrentDate() {
  let formatter = useDateFormatter();

  return <p>{formatter.format(new Date())}</p>;
}

<>
  <I18nProvider locale="en-US">
    <CurrentDate />
  </I18nProvider>
  <I18nProvider locale="ru-RU">
    <CurrentDate />
  </I18nProvider>
</>

import {
  I18nProvider,
  useDateFormatter
} from '@react-aria/i18n';

function CurrentDate() {
  let formatter =
    useDateFormatter();

  return (
    <p>
      {formatter.format(
        new Date()
      )}
    </p>
  );
}

<>
  <I18nProvider locale="en-US">
    <CurrentDate />
  </I18nProvider>
  <I18nProvider locale="ru-RU">
    <CurrentDate />
  </I18nProvider>
</>