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
      />
    </P>
    <Hr />
    <P>
      <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#

const referenceDate = new Date('2025-06-01T12:00:00')
render(
  <P>
    <DateFormat
      value={new Date('2025-06-01T11:59:30')}
      relativeTime
      relativeTimeReference={() => referenceDate}
    />
    <DateFormat
      value={new Date('2025-06-01T11:58:00')}
      relativeTime
      relativeTimeReference={() => referenceDate}
    />
    <DateFormat
      value={new Date('2025-05-31T12:00:00')}
      relativeTime
      relativeTimeReference={() => referenceDate}
    />
  </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>
Suggest an edit