DocsBlog

Get Started

Components

Data Grid

Signals

Styling

Theming

↑↓Navigate
↵Select
EscClose
  • 1.8.0

  • Day

    Night

    Preview

    Switch mode
  • cerberus

    acheron

    elysium

    oceanus

Get Started
Components
Data Grid
Signals
Styling
Theming

Concepts

OverviewCompositionCerberus ContextTesting

Layout

Aspect RatioBleedBoxCenterContainerContainer QueryDividerFlexFloatGridGroupLink OverlayScrollableStackWrap

Components

AccordionAdmonitionAvatarButtonCarouselCheckboxClipboardCollapsibleComboboxConfirm ModalCTA ModalDate PickerDialogFieldFieldsetFile UploaderIconButtonInputLoading StatesMarqueeMenuNotificationsNumber InputPaginationPin InputPopoverProgress IndicatorsPrompt ModalRadioRatingSelectSliderSplit ButtonSwitchTableTabsTagTextTextareaToggleTooltip

Utilities

Client OnlyDownload TriggerEnvironmentFeature FlagsFocus TrapForFormat ByteFormat NumberFormat Relative TimeFormat Relative TimeFrameHighlightJSON Tree ViewLocalePortalPresenceShowSwapsplitPropsTheme

Format Relative Time

Format relative time using the native `Intl.RelativeTimeFormat` API.

  • npm
View as Markdown
Open this page in Markdown
Anthropic
Open in Claude
Ask questions about this page
OpenAI
Open in ChatGPT
Ask questions about this page

Import

The time formatting logic supports both string (HH:mm[:ss]) and Date inputs.

import { Format } from '@cerberus/react'

Usage

Basic

Use the Format.Time component to format a time value with default options.

Loading example...

Date

Use a Date object as the value.

Loading example...

Seconds

Use the withSeconds prop to include seconds in the output.

Loading example...

AM/PM Labels

Use amLabel and pmLabel to customize day-period labels when using 12-hour format.

Loading example...

Locale

Use the locale provider to format the time according to a specific locale.

Loading example...

On this page

  • Import
  • Usage
    • Basic
    • Date
    • Seconds
    • AM/PM Labels
    • Locale
Edit this page on Github
6:47 PM

Boarding

18:45
Last sync3:07:19 AM
Support window5:15 evening
1,45 kB1.45 kB