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"
    />
  );
}

Result

Loading...

Variants

Custom hook

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

Live Editor

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

Result

Loading...

Timezone

The component supports to display timezones by adding showTimezone.

Live Editor

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

Result

Loading...

Props

Name	Type	Default
date *	Date	—
locale	"tr" | "en" | "de" | "es" | "fr" | "ja" | "ko" | "pt" | "ru" | "vi" | "zh"	"en"
format	"time" | "date" | "dateCompact" | "dateTime" | "dateTimeCompact"	"date"
showTimezone	boolean	false
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.

;