---
id: "packages/active-ui/today"
title: "Today"
description: "Today's date as a button that opens the current month, with week numbers and the day marked."
url: "/packages/active-ui/today"
locale: "en"
revision: "dcf867cd4dfb9af5"
---

# Today

`Today` shows the current day as a sentence on a button, for the header of a dashboard. The button
opens a [Calendar](/packages/active-ui/calendar) of the month, with week numbers and today
marked. It is an orientation aid: a clicked day is highlighted, but nothing is reported to your
application.

**Example: Today with its month**

Client: Runs entirely in your browser. Source: `examples/ui/today.tsx`.

```tsx
// apps/docs/examples/ui/today.tsx
'use client';

import {formatDateOnly} from '@workspace/active-format';
import {Today} from '@workspace/active-ui/components/composed/today';

// A fixed "today", so every reader sees the same day. In an application it
// comes from the owner's time zone: todayIsoDate(timeZone).
const TODAY = '2026-10-20';

/**
 * Today's date as a button that opens the current month, with week numbers
 * and the day marked. The sentence and the calendar come from the same
 * `today` value.
 */
export default function TodayExample() {
  return (
    <Today
      today={TODAY}
      formattedDate={formatDateOnly(TODAY, 'full', 'en')}
      locale="en"
    />
  );
}
```

## What the composition adds

- **One source for the day**: `today` sets the marked and opened day; the sentence comes from your
  own formatting of the same value, so the two cannot name different days.
- **No clock of its own**: which day it is depends on the time zone of whoever owns the data, so
  your application passes it. An invalid `today` throws while rendering.
- **The calendar in the reader's language** through `locale`.

## Usage

```tsx
import {Today} from '@workspace/active-ui/components/composed/today';

const today = todayIsoDate(timeZone);

<Today
  today={today}
  formattedDate={formatDateOnly(today, 'full', presentation)}
  locale="en"
/>;
```

## What your application provides

- `today` from the owner's time zone, the formatted sentence, and the language.
- Of the HTML attributes, only `className` and `id` are used.

## API

| Prop | Type | Required | Description |
| --- | --- | --- | --- |
| `formattedDate` | `string` | yes | The current day as a sentence, formatted by the caller. Derive it from the same `today` value (`formatDateOnly(today, 'full', presentation)`), so the heading and the calendar cannot name two different days. |
| `locale` | `string` | yes | The app locale; determines the language of the calendar in the popover.  **Deliberately a prop and not `useLocale()` inside**, the same rule as for `DateField`: this package reads no provider context for language. Its consumers are server components that already have the locale. |
| `today` | `string` | yes | The current calendar day of the surface's owner, as ISO `YYYY-MM-DD`.  **Required, and not the browser's clock.** Which day "today" is follows from the business time zone of whoever owns the surface; a browser in another zone, or a render just past midnight, would otherwise mark a different day than the heading next to it. The caller derives it with `todayIsoDate(timeZone)` from its own zone. This component reads no clock. |