Date and Time Picker

  1. OPTIS Product Options, Variant
  2. 20 Option Types
  3. Others


Date and Time Picker


A Date & time option lets customers choose a date, a time, or both from a calendar and clock popup - perfect for appointments, deliveries, or any time-sensitive order.


Plan: Date & time is available on the Advanced plan and above. On the Free plan you can still try it on one live product with a Premium option set. See Plans and feature availability.



When to use a Date & time picker


  • Choosing a delivery date for cakes, flowers, or gifts.
  • Booking a pickup time for a customized order.
  • Scheduling a service appointment (spa, photography, consulting).
  • Reserving a seat or slot for an event.


How to add a Date & time option

Step 1: Add the option


Open 1. Add options, click Add option, tick Date & time under Others on the New options tab, then click Add options.



Step 2: Set up the picker


Enter the Label on product (e.g., "Select Your Delivery Date"). Tick Required field if customers must choose a date before adding to cart, and Hide option label if you don't want to show the label.



  • Date & time picker or Date & time range - a single date/time, or a start and end (a range, for example a rental period). Time only is not available in range mode.



  • Selectable dates - tick the weekdays customers can select. For each, choose All day, or set a Start time and End time.



  • Display date/time - what customers select (Date & time, Date only or Time only) and how it is written: Time format (12-hour or 24-hour) and Overall format (DD-MM-YYYY, MM-DD-YYYY, 30th January, YYYY, or January 30th, YYYY). The Example shown previews the result.



  • Deactivated dates - block dates or times customers cannot choose: Cut-off date/time (a value and a unit, so orders need advance notice), Disable specific dates (e.g., holidays), Disable date ranges (a closure period), or Disable past dates. These three are not available when customers select Time only.



Step 3: Save and test


Click Save, then open the product page on your store to check that the Date & time picker works correctly.



Option settings


The Date & time option does not support Price add-on or SKU.


Help text


Add a short description of the option, shown as a Tooltip, Below the option title, Beside the option title, or Below the option.



Placeholder


A short hint shown inside the field to guide customers on what to enter.



Show or hide with Visibility (conditional logic)


Show or hide the Date & time option based on another option. Available on the Advanced plan and above. Note that a Date & time option can be shown or hidden by other options, but it cannot be used to trigger another option's visibility. See How to set up Conditional logics?.



Option width


In the Display tab, set Option width (25%, 33%, 50%, 67%, 75% or 100%) to control how much horizontal space the Date & time option takes.



Error messages


If a customer picks a time outside the allowed range, or an invalid date range, the storefront shows an error message. Change the wording in Settings > Translation Texts > Default text customization > Product page (Invalid time and Invalid date range).




Updated on: 25/09/2026

Was this article helpful?

Share your feedback

Cancel

Thank you!