#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

#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')

#Parameters