# Shadcn Popover

> Date selector with popover

- Type: example, free and open source (MIT)
- Component: [Date Selector](https://reui.io/components/date-selector.md)
- Page: https://reui.io/components/date-selector/c-date-selector-2
- Docs (Base UI): https://reui.io/docs/components/base/date-selector.md
- Docs (Radix UI): https://reui.io/docs/components/radix/date-selector.md
- MCP: `get_example("c-date-selector-2")`
- Registry item: https://reui.io/r/styles/base-nova/c-date-selector-2.json
- Uses: Button, Date Selector, Popover, Separator

## Best for

A popover anchored under an outline trigger, with typed shortcuts and Apply and Cancel below the selector

## Agent notes

- `internalValue` is a draft that `handleCancel` discards; only `handleApply` copies it into `value`, so save from there

## When not to use

- A choice that must block the page until it is confirmed: use [Dialog](https://reui.io/components/date-selector/c-date-selector-3.md) (`get_example("c-date-selector-3")`)

## Install

```bash
npx shadcn@latest add @reui/c-date-selector-2
```

## About Shadcn Date Selector

### When to use

- Report and list filters on a day, month, quarter, half year or year with is, before, after or between
- Due date fields opened from a button into a popover or dialog and committed on Apply
- Localized pickers with translated months, a regional date format and a Monday first week

### When not to use

- One day or a from and to span with no period tabs or operators: use [Calendar](https://reui.io/components/calendar.md) (`get_component("calendar")`)
- A date condition sitting beside other field conditions in one query bar: use [Filters](https://reui.io/components/filters.md) (`get_component("filters")`)
- A booking flow that pairs a day with time slots and a confirm step: use the [Schedule blocks](https://reui.io/blocks/application/schedule.md)

### Agent notes

- Period lists run from `minYear` 2015 to `maxYear` 2026 by default, so pass a later `maxYear` to offer next year; `yearRange` alone changes nothing
- `onChange` runs on mount and again whenever its identity changes, so pass a stable state setter, never an inline API call
- The text field takes typed input such as 2025, Q4 or a full date only when `inputHint` is set; without it the field is read only

Every ReUI item has a twin like this one; the index is https://reui.io/llms.txt. Agents with the ReUI MCP (https://reui.io/docs/mcp) get the same guidance from the getters named above.