Skip to content
Home

DateFormat

Info
Demos
Properties

Demos

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>

Hide year when in current year

Use hideCurrentYear to hide the year when the date is in the current year. Works with any dateStyle.

Use hideYear to always hide the year from the formatted date,

const currentYear = new Date().getFullYear()
const dateInCurrentYear = `${currentYear}-02-04`
const dateInOtherYear = `${currentYear - 1}-02-04`
render(
  <P>
    <DateFormat
      value={dateInCurrentYear}
      dateStyle="medium"
      hideCurrentYear
    />
    <DateFormat
      value={dateInOtherYear}
      dateStyle="medium"
      hideCurrentYear
    />
    <Hr />
    <DateFormat
      value={dateInCurrentYear}
      dateStyle="long"
      hideCurrentYear
    />
    <DateFormat value={dateInOtherYear} dateStyle="long" hideCurrentYear />
  </P>
)

Inline

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

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

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 and time

Use the timeStyle property to include a time value alongside the date. Add dateTimeSeparator if you need a custom separator.

Updated at 

<P>
  Updated at{' '}
  <DateFormat
    value={new Date('2026-01-13T11:55:00')}
    dateStyle="medium"
    timeStyle="short"
    dateTimeSeparator=" – "
  />
</P>

Relative time

<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

Use relativeTimeStyle to control the relative time formatting without affecting dateStyle.

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 properties 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:

<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 property affects how durations are formatted using the browser's built-in Intl.DurationFormat API.

Short:

Medium:

Long (default):

Different locales with short style:

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