Rental
RentalBookingForm
Date range picker with duration calculation, tiered pricing, and booking submission.
A booking form for rental products. Handles start/end date selection, automatic duration calculation based on the pricing unit (hourly/daily/weekly/monthly), tiered pricing resolution, and validation for min/max duration constraints.
Preview
Usage
<CRentalBookingForm
:rental="product.rental"
:product-id="product.id"
@submit="handleBooking"
/>
With Availability
<CRentalBookingForm
:rental="rental"
:product-id="product.id"
:availability="availableSlots"
@submit="handleBooking"
/>
Loading State
<CRentalBookingForm :rental="rental" :product-id="product.id" loading />
Props
| Prop | Type | Default | Description |
|---|---|---|---|
rental | RentalProductMeta | required | Rental metadata |
productId | string | required | Product ID |
availability | AvailabilitySlot[] | [] | Available time slots |
loading | boolean | false | Submitting |
ui | Partial<{...}> | — | Per-instance theme overrides |
Events
| Event | Payload | Description |
|---|---|---|
submit | CreateRentalBookingInput | Booking submitted { productId, startDate, endDate, quantity } |
Features
- Auto duration calculation: Computes duration from date range using the rental's pricing unit
- Tiered pricing: Automatically resolves the best tier based on duration
- Validation: Enforces min/max duration constraints with visual warnings
- Smart input types: Shows
datetime-localfor hourly,datefor daily/weekly/monthly - Live pricing summary: Shows duration, rate, deposit, and estimated total