---
title: "PeriodPicker"
description: "The period a report or dashboard reads: presets such as the last 7 days or this month, then a custom range. A report always has a period, so there is nothing to clear; the popover states the exact days and, while comparing, the previous period. The value is plain days the app keeps in the URL."
---

> Documentation Index
> Fetch the complete documentation index at: https://epidermis.getarbol.com/llms.txt
> Use this file to discover all available pages before exploring further.

# PeriodPicker

## A report of what already happened

The calendar ends today; the page starts on the last 7 days (presetRange(7)) and can compare them with the 7 days before.

```tsx
import { getLocalTimeZone, today } from '@internationalized/date';
import { useState } from 'react';
import { PeriodPicker, presetRange } from '@arbol-ai/ui';

const PastExample = () => {
  const [period, setPeriod] = useState(() => presetRange(7));
  const [isComparing, setIsComparing] = useState(true);
  return (
    <PeriodPicker
      isComparing={isComparing}
      label="Period"
      maxValue={today(getLocalTimeZone())}
      onChange={setPeriod}
      onComparingChange={setIsComparing}
      value={period}
    />
  );
};

<PastExample />
```

## An agenda that also looks ahead

Scheduling reports add the days ahead, for appointments still to come.

```tsx
import { useState } from 'react';
import { PeriodPicker, presetRange } from '@arbol-ai/ui';

const AheadExample = () => {
  const [period, setPeriod] = useState(() => presetRange({ next: 7 }));
  return (
    <div className="flex max-w-md flex-wrap gap-2">
      <PeriodPicker
        className="min-w-40 flex-1"
        firstDayOfWeek="mon"
        label="Period"
        onChange={setPeriod}
        presets={[7, 30, 90, 'this-month', 'last-month', { next: 7 }, { next: 30 }]}
        value={period}
      />
    </div>
  );
};

<AheadExample />
```

## Source

The examples above are [`src/blocks/period-picker/period-picker.examples.tsx`](https://github.com/getarbol/project-arbol-ui/blob/main/src/blocks/period-picker/period-picker.examples.tsx), which the library's tests render too.

Source: https://epidermis.getarbol.com/components/blocks/period-picker/index.mdx