Skip to content
Home

DateFormat

Info
Demos
Properties

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.

Good to know:

  • You can render a date in different formats, depending on the locale.
  • The component supports relative time, such as "2 hours ago", "in 3 days", etc.
  • The component supports different date styles, such as short, medium, long, and full.
  • The component will automatically detect and format ISO 8601 duration strings.

Relevant links

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 styles

Code Editor
<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

Payment due . Please make sure you have sufficient funds available.

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

Date value formats

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

Relative time

Code Editor
<P>
  <DateFormat
    value={new Date(new Date().getTime() - 30 * 1000)}
    relativeTime
  />
  <DateFormat
    value={new Date(new Date().getTime() - 2 * 60 * 1000)}
    relativeTime
  />
  <DateFormat
    value={new Date(new Date().getTime() - 24 * 60 * 60 * 1000)}
    relativeTime
  />
</P>

Relative time with different styles

The dateStyle prop affects how durations are formatted using the browser's built-in Intl.DurationFormat API.

Short:





Medium:





Long (default):





Future dates with long style:





Different locales with short style:

Duration formatting

The DateFormat component automatically detects and formats ISO 8601 duration strings. No additional props are needed.

  • PT1H = 1 hour (P = period, T = time, 1H = 1 hour)
  • PT2H30M = 2 hours 30 minutes
  • P1D = 1 day (P = period, 1D = 1 day)
  • P1DT2H30M = 1 day 2 hours 30 minutes
  • P1W = 1 week,
  • P1M = 1 month
  • P1Y = 1 year

Short durations:

Longer durations:

Different locales:

Code Editor
<H4>Short durations:</H4>
<P>
  <DateFormat value="PT1H" />
  <DateFormat value="PT2H30M" />
  <DateFormat value="PT45M" />
</P>
<H4>Longer durations:</H4>
<P>
  <DateFormat value="P1D" />
  <DateFormat value="P1DT2H30M" />
  <DateFormat value="P1W" />
  <DateFormat value="P1M" />
  <DateFormat value="P1Y" />
</P>
<H4>Different locales:</H4>
<P>
  <DateFormat value="PT2H30M" locale="en-US" />
  <DateFormat value="PT2H30M" locale="nb-NO" />
  <DateFormat value="PT2H30M" locale="de-DE" />
</P>

Duration with different styles

The dateStyle prop affects how durations are formatted using the browser's built-in Intl.DurationFormat API.

Short:

Medium:

Long (default):

Different locales with short style:

Code Editor
<H4>Short:</H4>
<P>
  <DateFormat value="PT2H30M" dateStyle="short" />
  <DateFormat value="P1DT2H30M" dateStyle="short" />
</P>
<H4>Medium:</H4>
<P>
  <DateFormat value="PT2H30M" dateStyle="medium" />
  <DateFormat value="P1DT2H30M" dateStyle="medium" />
</P>
<H4>Long (default):</H4>
<P>
  <DateFormat value="PT2H30M" dateStyle="long" />
  <DateFormat value="P1DT2H30M" dateStyle="long" />
</P>
<H4>Different locales with short style:</H4>
<P>
  <DateFormat value="PT2H30M" dateStyle="short" locale="en-US" />
  <DateFormat value="PT2H30M" dateStyle="short" locale="nb-NO" />
  <DateFormat value="PT2H30M" dateStyle="short" locale="de-DE" />
</P>