Pretty duration

Use the <PrettyDuration /> component (for JSX display) or usePrettyDuration() hook (for attribute strings) to convert a start and end date string to a human-friendly format. Both utilities take the following props:

• timeFrom and timeTo accept start and end date values for the duration. These can be timestamps (2018-01-17T18:57:57.149Z) or relative times (now-15m).

• dateFormat specifies the output date/time format.

• quickRanges optionally accepts an array of quick range values that are used to pretty format custom ranges. If no custom quick ranges are passed, EUI will default to a set of common duration ranges defined below.

Show default common duration ranges

✄𐘗
json code block:
✄𐘗[
  {
    "start": "now/d",
    "end": "now/d",
    "label": "Today"
  },
  {
    "start": "now/w",
    "end": "now/w",
    "label": "This week"
  },
  {
    "start": "now/M",
    "end": "now/M",
    "label": "This month"
  },
  {
    "start": "now/y",
    "end": "now/y",
    "label": "This year"
  },
  {
    "start": "now-1d/d",
    "end": "now-1d/d",
    "label": "Yesterday"
  },
  {
    "start": "now/w",
    "end": "now",
    "label": "Week to date"
  },
  {
    "start": "now/M",
    "end": "now",
    "label": "Month to date"
  },
  {
    "start": "now/y",
    "end": "now",
    "label": "Year to date"
  }
]

Loading...

Props

usePrettyDuration

𐘂𐘂

✄𐘗✄𐘗

Prop ↦	Description and type ↦	Default value ↵
Prop timeFrom# ↦	Description and type Type: string ↦	Default value Required ↵
Prop timeTo# ↦	Description and type Type: string ↦	Default value Required ↵
Prop dateFormat# ↦	Description and type Type: string ↦	Default value Required ↵
Prop quickRanges# ↦	Description and type Type: DurationRange[] ↦	Default value ↵

𐘂𐘂