HumanisedDate

PreviousNext

Friendly absolute date (same-year → dd MMM; prior year → dd MMM yy).

import { HumanisedDate } from "@/rl-ui";

<HumanisedDate timestamp="2026-08-27" />

Examples

Same calendar year

Omits the year when the timestamp is in the current year.

import { HumanisedDate, Space, Text } from "@/rl-ui";

<Space direction="vertical" size="small">
<Text variant="label-01">ISO date</Text>
<HumanisedDate timestamp="2026-03-15" />
<Text variant="label-01">Month mid-year</Text>
<HumanisedDate timestamp="2026-08-27" />
</Space>

Prior years

Includes a short year (or full year across centuries).

import { HumanisedDate, Flex, Text } from "@/rl-ui";

<Flex direction="column" gap="2">
<Flex gap="2" align="center">
  <Text variant="helper-text-01">2024</Text>
  <HumanisedDate timestamp="2024-12-01" />
</Flex>
<Flex gap="2" align="center">
  <Text variant="helper-text-01">1999</Text>
  <HumanisedDate timestamp="1999-07-04" />
</Flex>
</Flex>

Epoch milliseconds

import { HumanisedDate } from "@/rl-ui";

<HumanisedDate timestamp={1725120000000} />

API

PropTypeDefaultDescription
timestampDate | number | string—Date to format (required). Accepts Date, epoch ms, or ISO/date string.