useDateFormatter

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.

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>
</>

API

DateFormatterOptions

DateFormatter