Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProA start date-time plus a duration field that computes the exit time and a tiered price with an hourly rate and a daily cap. Use this when a customer reserves parking by start time and length and the price depends on the hours.
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 customer reserves parking by start time and length and the price depends on the hours.
Do not use it for bookings by calendar day; use car-rental-period or coworking-day-pass.
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 | { start: string | null; duration: string | null } | empty | Local start date-time and ISO duration. |
| onValueChange | (r, quote: { end; price } | null) => void | - | Called with the exit time and price. |
| hourlyRate / dailyCap | number | 3 / 18 | Price per started hour and the cap per 24 hours. |
| maxHours | number | 72 | Longest stay. |
The pattern ships with a Testing Library test (parking-reservation-duration.test.tsx) that covers the price tiers, the daily cap, the exit time and the longest stay.