# Marker: Relative dates

> `<MarkerTime />` renders a `<time>` that reads Today, Yesterday, a weekday within the last week, then a short date. It updates itself at midnight. Pass `format` for your own wording.

Example: https://hextaui.com/docs/marker/examples/time
Component docs: https://hextaui.com/docs/marker.md

## Add this example

```bash
npx shadcn@latest add https://hextaui.com/r/marker-time.json
```

This adds `components/examples/marker/time.tsx` with the Marker component and the HextaUI theme tokens.

## Source

```tsx title="components/examples/marker/time.tsx"
"use client"

import { Marker, MarkerContent, MarkerTime } from "@/components/ui/marker"

const day = 24 * 60 * 60 * 1000
const dates = [0, 1, 3, 40, 400].map((ago) => new Date(Date.now() - ago * day))

export function MarkerTimeDemo() {
  return (
    <div className="flex w-full max-w-md flex-col gap-4">
      {dates.map((date) => (
        <Marker key={date.getTime()} variant="separator">
          <MarkerContent>
            <MarkerTime date={date} />
          </MarkerContent>
        </Marker>
      ))}
      <Marker variant="separator">
        <MarkerContent>
          <MarkerTime
            date={dates[0]}
            format={(date) =>
              date.toLocaleTimeString("en-US", {
                hour: "numeric",
                minute: "2-digit",
              })
            }
          />
        </MarkerContent>
      </Marker>
    </div>
  )
}
```

## Props in this example

### Marker

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `variant` | `"default" \| "separator" \| "border"` | `"default"` |  |

### MarkerTime

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `date` | `Date \| string \| number` | – | Required. Anything new Date() accepts. |
| `format` | `(date: Date) => ReactNode` | – | Replace the relative label with your own. |

## More Marker examples

- [Variants](https://hextaui.com/docs/marker/examples/variants.md)
- [Sticky dates](https://hextaui.com/docs/marker/examples/sticky.md)
- [Activity](https://hextaui.com/docs/marker/examples/events.md)
- [Long content](https://hextaui.com/docs/marker/examples/long-content.md)
- [Right to left](https://hextaui.com/docs/marker/examples/rtl.md)