# Period picker — Detent

> A date range picked the quick way first: type “since sep 3” or take a period, with its dates shown. The calendar is one step further for exact days. Compare it with the period before, apply.

Canonical: https://detentui.com/components/dates
Last updated: 2026-11-10

## About

A date range picked the quick way first: type “since sep 3” or take a period, with its dates shown. The calendar is one step further for exact days. Compare it with the period before, apply.

## Details

- A pill shows the range where it lives in a toolbar; open it and the top is a field. Type “since sep 3” or “last quarter” and the dates it landed on appear beside your words as you go.
- Under it, the periods people want most, each showing the dates it means today, so you read the range before you pick it.
- Pick exact dates steps over to the calendar: one month, the range one band a week, its ends filled and today ringed. Click a start, then an end, and the band follows your pointer.
- Compare with the period before or the same dates last year, and the dates it compares with show beside Apply. The panel is one size whichever way you pick.

## Keyboard shortcuts

| Keys | Action |
| --- | --- |
| Enter | Apply what you typed |
| Tab | Move through the periods |

## Install

```bash
npx shadcn add https://detentui.com/r/dates
```

## Related
- [All components](https://detentui.com/components)
- [Pro](https://detentui.com/pro)