# Shadcn Date Editors

> A date and a date range editor

- Type: example, free and open source (MIT)
- Component: [Filters](https://reui.io/components/filters.md)
- Page: https://reui.io/components/filters/c-filters-5
- Docs (Base UI): https://reui.io/docs/components/base/filters.md
- Docs (Radix UI): https://reui.io/docs/components/radix/filters.md
- MCP: `get_example("c-filters-5")`
- Registry item: https://reui.io/r/styles/base-nova/c-filters-5.json
- Uses: Button, Calendar, Filters, Input

## Best for

Typed phrases like next friday or a calendar click for one day, and a two month calendar with last 7 and 30 day presets for a range

## Agent notes

- Values are `FilterDateValue` tokens holding a `relative` offset or a `date` string, never a Date; resolve each with `resolveFilterDate` when you compile
- `dateOperators` is declared in this file, so `is_before`, `is_on_or_after` and the rest need their own branch in your query compiler

## When not to use

- A day or span of days picked on its own, outside any attribute or condition: use [Date Selector](https://reui.io/components/date-selector.md) (`get_component("date-selector")`)

## Third-party libraries

- React DayPicker v9: [API reference](https://daypicker.dev/v9/api), [docs](https://daypicker.dev/v9/start), through shadcn Calendar

## Install

```bash
npx shadcn@latest add @reui/c-filters-5
```

## About Shadcn Filters

### When to use

- Toolbars of removable filter chips over a table or list, one field, condition and value per chip
- Nested AND and OR condition builders, hung off a trigger over a report or laid out inline
- Attribute catalogs too large or deep to list at once, and option lists paged from a server

### When not to use

- A finished record table with its chip bar, paging and row actions already built: use the [Filtering blocks](https://reui.io/blocks/data-grid/filtering.md)
- Storefront product facets with price sliders, color swatches and department pills: use the [Filter Sidebar blocks](https://reui.io/blocks/ecommerce/filter-sidebar.md)
- One day or span of days picked on its own, with no attribute or condition: use [Date Selector](https://reui.io/components/date-selector.md) (`get_component("date-selector")`)

### Agent notes

- `renderValue`, `icon` and a component `editor` count toward the schema index by presence only, so swapping one alone keeps serving the old one
- A rule reaches `onQueryChange` unfinished: an empty `operator`, or a `value` still undefined or empty where its `arity` is not none; skip it when compiling
- Negate swaps to an operator's `inverse` where one exists and otherwise sets `negated`, as on `starts_with`, so a compiler must read `negated`

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.