#DateFormat

#Import

import { DateFormat } from '@dnb/eufemia'

#Description

A ready to use DNB date formatter. Use it wherever you want to format dates.

Good reasons to use this component:

• Makes the date formatting uniform for all DNB applications.
• Makes dates accessible to screen readers.

#Under the hood

The component uses Intl.DateTimeFormat browser API and Date.toLocaleDateString as a fallback, to format dates based on locale.

See Intl.DateTimeFormat locale documentation for accepted string formats.

The time element is used to ensure that the date is readable for screen readers.

#Supported date value formats

The following formats are supported as date values for conversion:

• yyyy-MM-dd
• dd.MM.yyyy
• dd/MM/yyyy
• Date object

#Demos

#Date value formats

<P>
  <DateFormat>2025-08-01</DateFormat>
  <DateFormat>01.08.2025</DateFormat>
  <DateFormat>01/08/2025</DateFormat>
  <DateFormat value={new Date('2025-08-01')} />
</P>

#Date styles

<P>
  <DateFormat dateStyle="full">2025-08-01</DateFormat>
  <DateFormat dateStyle="long">2025-08-01</DateFormat>
  <DateFormat dateStyle="medium">2025-08-01</DateFormat>
  <DateFormat dateStyle="short">2025-08-01</DateFormat>
</P>

#Inline

<P>
  Payment due <DateFormat>2025-08-01</DateFormat>. Please make sure you
  have sufficient funds available.
</P>