Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProA list of date ranges when something is unavailable, with add and remove, ranges that touch or overlap merged into one, and the total days blocked. Use this when an admin blocks out holidays, closures or leave periods and the list must stay tidy.
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 an admin blocks out holidays, closures or leave periods and the list must stay tidy.
Do not use it for one range; use date-range-field.
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 }[] | [] | Blocked ranges. |
| onValueChange | (ranges: DateRange[]) => void | - | Sorted, merged ranges. |
| locale | string | browser | Date format. |
The pattern ships with a Testing Library test (blackout-dates-editor.test.tsx) that covers merging overlaps and neighbours, sorting, the total and add or remove.