#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.

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

• Source code
• Docs code

#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

#Relative time reference

When using relativeTime, you can provide a now prop (as a function) to define the reference point for relative time calculations. This is useful for testing or when you need a specific reference time. If not provided, the current time is used.

#formatDate helper function

If you really need a formatted date string without rendering the component, you can import the utility directly:

import { formatDate } from '@dnb/eufemia/components/date-format/DateFormatUtils'
formatDate('2023-01-01')

#getOsloDate helper

When you need a UTC Date object with midnight that always reflects the current day in Europe/Oslo, pull in the helper directly:

import { getOsloDate } from '@dnb/eufemia/components/date-format/DateFormatUtils'
getOsloDate() // -> e.g. Date object representing "2025-11-24T00:00:00.000Z" regardless of the runtime timezone

This is helpful when you are comparing "today" against backend data or applying Oslo-specific highlighting in the DatePicker.

#Parameters