Skip to content
Home

DateFormat

Info
Demos
Properties

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>