The period picker is used by your customers in your online store to choose pickup or delivery, choose a pickup location or enter a delivery address, and when selecting a rental period.
It is also used when you're creating a manual order in the back office.
How it works
Online store
When a customer visits your online store and clicks to select a rental period or adds a product to the cart, the period picker popup appears. The picker has a few steps depending on how you've set up your rental period settings.
See the article How to set up rental period settings first to customize how your customers select a rental period.
How to use the period picker
Once your rental period settings are properly set, here is a walkthrough on how to use the period picker on your rental website:
Pickup or Delivery – If you have the Deliveries app installed and enabled, then the first step will be for your customer to choose between pickup or delivery.
Location – If your website has multiple locations, then customers will need to choose a location for the pickup option.
Delivery address form – If they choose delivery, then they will have a form to fill out with their delivery address.
Dates – Once your customer has chosen pickup or delivery, next they will need to choose their rental period. They can click on a date on the calendar or type it in.
If you have fixed durations enabled, the until date will be automatically calculated based on the selected duration. For minute-based durations, the system rounds to the nearest whole minute to ensure accuracy.
Times – If you have time selection enabled, they will then be prompted to pick a time both for pickup and return.
Once they've finished making their selections, they can apply their rental period.
How does availability work on the date picker?
If you have enabled availability in the Settings > Preferences, then your customers will be able to see what is available. If you would like to customize how availability is shown, first check out the How to display and hide product availability article.
Per product availability
Availability can be seen for individual products using the Check availability button.
If you have chosen to show quantities, then they will also be able to see the quantity available on the calendar.
 | The green circle shows that the product is available. |
| A green outline with a green diagonal rectangle shows that the product is available for part of the day. |
| A green circle with a strikethrough the number shows that the product is available, but closed for pickup and return. |
| A grey outline with a white circle means that the product is unavailable. |
 | A red outline with a red diagonal rectangle that the product is available for part of the day when a rental period is selected. |
 | A red outline means that the product is unavailable when a rental period is selected. |
Cart availability
Once a customer has added products to the cart, the date picker will show availability of all products in the cart. This calendar can be accessed through a section or from the cart.
The same color labelling applies as for the cart availability calendar.
Customizing the period picker
The new period picker design comes with new availability color options so you can best match your branding.
To change the colors:
Go to Online store > Preferences > Branding.
Under Availability color, click the dropdown menu.
Choose from the available color options. A preview of the colors will be shown on the right side.
Automatically choose times
If you would like to have the default order times automatically selected when making new bookings or when your customers are making bookings in your online store, choose to Pre-fill the times option.
Go to Settings > Rental period > Default order times.
Select the Pre-fill the times option.
Choose if this will apply to the Back office only or Both back office and website.
Once you've made your selection, click Save.
The period picker on mobile
The period picker and availability calendar are fully optimized for mobile so your customers will have the same smooth, intuitive experience as the desktop version.
