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.

Time or datetime

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

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:

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

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.