# Shadcn Dialog

> Date selector with dialog

- 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-3
- 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-3")`
- Registry item: https://reui.io/r/styles/base-nova/c-date-selector-3.json
- Uses: Button, Date Selector, Dialog

## Best for

A modal titled Select Due Date with a read only field, closing on Cancel or committing on Apply

## Agent notes

- `handleApply` copies the draft `internalValue` into local `value` state and closes; persist the date to your form or API there

## When not to use

- A picker kept next to its trigger while the page stays usable: use [Popover](https://reui.io/components/date-selector/c-date-selector-2.md) (`get_example("c-date-selector-2")`)

## Install

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

## 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.