Date Localization

The Date Localization is for a consistent date formatting. You can use both DateLocalization component and useDateLocalization hook to get formatted date. To see all different date formats with different locales please check Internationalization.

Example

Live Editor

function MyDateFormatter() { const date = new Date(); return ( <DateLocalization date={date} locale="en" format="dateTimeCompact" /> ); }

function MyDateFormatter() {
  const date = new Date();
  return (
    <DateLocalization
      date={date}
      locale="en"
      format="dateTimeCompact"
    />
  );
}

Result

Loading...

Example using custom hook

You need to pass the date, locale and format to the useDateLocalization hook like this example:

Live Editor

function MyDateFormatter() { const date = new Date(); const formattedDate = useDateLocalization(date, 'zh', 'dateTime'); return ( <span>{formattedDate}</span> ); }

function MyDateFormatter() {
  const date = new Date();
  const formattedDate = useDateLocalization(date, 'zh', 'dateTime');
  return (
    <span>{formattedDate}</span>
  );
}

Result

Loading...

Props

Name	Type	Default
date *	Date	—
locale	"tr" | "en" | "de" | "es" | "fr" | "ja" | "ko" | "pt" | "ru" | "vi" | "zh"	"en"
format	"date" | "dateCompact" | "dateTime" | "dateTimeCompact"	"date"
css Add custom styles to this component. Use with caution. Learn more here: Link	SupportedStyleAttributes	—
inputFieldCss	SupportedStyleAttributes	—
data-{foo} Data attributes can be used by testing libraries to retrieve components or assert their existence	string	—
* - the prop is required.

;