Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProA filter-bar button that shows the chosen range and opens a preset, typed and calendar panel in a popover, closing when the range is applied. Use this when a report or table needs a compact date filter that shows its current value.
Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.
Use it when a report or table needs a compact date filter that shows its current value.
Do not use it for a range that is always visible on the page; use range-calendar inline.
This item is part of tealmac UI Pro
The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.
| Prop | Type | Default | Description |
|---|---|---|---|
| value / defaultValue | { from: string; to: string } | null | null | Applied range. |
| onValueChange | (range: DateRange | null) => void | - | Called when Apply is pressed. |
| placeholder | string | Pick a date range | Button text while empty. |
| max | string | - | Latest selectable day (e.g. today). |
| today / locale | - | - | Reference day and locale. |
aria-haspopup="dialog"); Escape closes the popover and returns focus to the button.range-calendar).The pattern ships with a Testing Library test (date-range-filter-popover.test.tsx) that covers the button label, opening, applying a preset and closing.