Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProA two-month calendar that picks check-in and check-out, enforces a minimum and maximum number of nights, refuses a stay that crosses a sold-out night and shows the nights and the total price. Use this when a guest chooses a stay and every night in it must be available.
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 guest chooses a stay and every night in it must be available.
Do not use it for single-day bookings; use appointment-booker.
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 | Check-in and check-out as ISO dates. |
| onValueChange | (stay: DateRange | null) => void | - | Called with a valid stay. |
| minNights / maxNights | number | 1 / 30 | Stay length limits in nights. |
| soldOut | string[] | [] | ISO dates of nights that cannot be booked. |
| nightlyRate / currency | number / string | - / USD | Shows the total when set. |
grid (see calendar-grid); sold-out nights are disabled.role="status", role="alert"), so a screen reader hears "3 nights" or why a stay was refused.The pattern ships with a Testing Library test (hotel-stay-dates.test.tsx) that covers choosing a stay, the night count and total, the minimum stay, and refusing a stay across a sold-out night.