FormatDate

Date formatting

Pass in a JS Date object to date prop, renders a bifrost-default formatted date, including a tooltip on hover where date includes month name, time includes timezone.

<FormatDate date={myDate} />
<FormatDate date={myDate} />

Time or datetime

Include the time by setting show to "time" or "datetime":

<FormatDate show="time" date={new Date()} />
<FormatDate show="datetime" date={new Date()} />
<FormatDate show="time" date={new Date()} />
<FormatDate show="datetime" date={new Date()} />

Locale

FormatDate follows current bifrost locale (default english). Use <Bifrost locale={nbNO}> in your app to use norwegian formatting.

Tooltip

Since some date formats can be ambiguous, we supply a tooltip on hover.

For show="date" we include a named month, and for show="time" we show 24h time and the time zone.

In certain circumstances it can be useful to display the time on tooltip even if show="date" (default), which you can get with the fullTooltip prop:

<FormatDate fullTooltip date={new Date()} />
<FormatDate fullTooltip show="time" date={new Date()} />
<FormatDate fullTooltip date={new Date()} />
<FormatDate fullTooltip show="time" date={new Date()} />

If you don't want a tooltip, you can hide it with the noTooltip prop

<FormatDate date={new Date()} noTooltip />
<FormatDate show="time" date={new Date()} noTooltip />
<FormatDate date={new Date()} noTooltip />
<FormatDate show="time" date={new Date()} noTooltip />

Custom format options

We recommend you always use the default format for consistency, but for special cases you can use the options prop which accepts Intl.DateTimeFormat options.

Make sure the show prop makes sense with the options you pass, or the tooltip (not customizable) might not. You can also override the current bifrost locale with locale prop, if necessary.

<FormatDate date={new Date()} options={{
  day: 'numeric',
  month: 'short',
  year: 'numeric'
}}/>

<FormatDate show="time" date={new Date()} options={{
  hourCycle: 'h12',
  hour: 'numeric',
  minute: '2-digit'
}} />

<FormatDate show="datetime" date={new Date()} options={{
  day: 'numeric',
  month: 'short',
  year: 'numeric',
  hourCycle: 'h12',
  hour: 'numeric',
  minute: '2-digit'
}} />
<FormatDate date={new Date()} options={{
  day: 'numeric',
  month: 'short',
  year: 'numeric'
}}/>

<FormatDate show="time" date={new Date()} options={{
  hourCycle: 'h12',
  hour: 'numeric',
  minute: '2-digit'
}} />

<FormatDate show="datetime" date={new Date()} options={{
  day: 'numeric',
  month: 'short',
  year: 'numeric',
  hourCycle: 'h12',
  hour: 'numeric',
  minute: '2-digit'
}} />

Sandbox

import FormatDate from "@intility/bifrost-react/FormatDate";
import Grid from "@intility/bifrost-react/Grid";

export default function FormatDateDemo() {
  const date = new Date();

  return (
    <Grid>
      <div>
        Date:{" "}
        <FormatDate
          date={new Date()}
          options={{
            day: "numeric",
            month: "short",
            year: "numeric",
          }}
        />
      </div>
      <div>
        Time:{" "}
        <FormatDate
          show="time"
          date={new Date()}
          options={{
            hourCycle: "h12",
            hour: "numeric",
            minute: "2-digit",
          }}
        />
      </div>
      <div>
        Date and time:{" "}
        <FormatDate
          show="datetime"
          date={new Date()}
          options={{
            day: "numeric",
            month: "short",
            year: "numeric",
            hourCycle: "h12",
            hour: "numeric",
            minute: "2-digit",
          }}
        />
      </div>
      <div>
        Date with time tooltip:{" "}
        <FormatDate
          fullTooltip
          date={new Date()}
          options={{
            day: "numeric",
            month: "short",
            year: "numeric",
          }}
        />
      </div>
    </Grid>
  );
}

String functions