> For the complete documentation index, see [llms.txt](https://docs.optis.me/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.optis.me/product-options/20-option-types/others/date-and-time-picker.md).

# Date and Time Picker

{% hint style="info" %}
**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](/product-options/getting-started/plans-and-features.md).
{% endhint %}

### 1. How Does the Date and Time Picker Display? <a href="#id-2-1-how-does-the-date-and-time-picker-display" id="id-2-1-how-does-the-date-and-time-picker-display"></a>

The Date and Time Picker option lets your customers choose a specific date, time, or both directly from a calendar and clock popup on the product page. This is perfect for services like appointments, deliveries, event bookings, or any time-sensitive orders.

Example of how it appears on a product page:

* A customer selects a Delivery date from a calendar.

<figure><img src="https://1821185975-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRFiuDpHWm2HwzxPH4lfM%2Fuploads%2F1ZNSj0pQtJXX3f1REOpJ%2Fd%26t.png?alt=media&amp;token=3ab05c33-04cb-4fa7-872b-e59277262fd0" alt=""><figcaption></figcaption></figure>

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXdCIOYyTKClWKpcjTyj5zJBByfaFPdXDmv5klFK5-Ypnun7z0kRc1jp2EXyt1d5y9typ2ug_lbWCfKqVwHO3nJAVY2Cr3U4a2oksXA02ufhL9wyGIaM32JcdKmyl3ruFkY6pnktXA?key=DC83dM0yOWsDjpoRFQoUWeuE" alt=""><figcaption></figcaption></figure>

### 2. How to Create a Date and Time Picker <a href="#id-2-2-how-to-create-a-date-and-time-picker" id="id-2-2-how-to-create-a-date-and-time-picker"></a>

**Step 1: Add a New Option**

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

<figure><img src="https://1821185975-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRFiuDpHWm2HwzxPH4lfM%2Fuploads%2FhlwPuGPGLVfC0gm3ETEk%2Fd%26t1.png?alt=media&amp;token=73834f89-11c1-4000-baa3-d60f1fcfdff1" alt=""><figcaption></figcaption></figure>

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXfsWRcJbDxckP24ucoSENlKXeDdFnJ0FqV-dzahT6TRS-aSq-QlvAr1K__AFzOHn29sZjV2c-K3L9UWpf2pBWMHlGRGIUwXxPAXfy4ym7l39EyP1R9LwfORnmL28pdN1efYjllDHg?key=DC83dM0yOWsDjpoRFQoUWeuE" alt=""><figcaption></figcaption></figure>

**Step 2: Set Up Your Date/Time Picker**

* **Label on product**: Enter the label customers see (e.g., "Select Your Delivery Date", "Book Your Appointment Time"). Tick **Required field** if customers must choose a date before adding to cart, and **Hide option label** if you do not want to show the label.

<figure><img src="https://1821185975-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRFiuDpHWm2HwzxPH4lfM%2Fuploads%2Fhzjs5zKEOBhrIbWgjNQ1%2Fd%26t2.png?alt=media&amp;token=de2a246f-e8af-4027-b8fe-5125a31fdc6c" alt=""><figcaption></figcaption></figure>

* **Date & time picker** or **Date & time range**: Choose whether customers pick a single date/time or a start and end (a range, for example a rental period). In **Date & time range** mode, **Time only** is not available.

<figure><img src="https://1821185975-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRFiuDpHWm2HwzxPH4lfM%2Fuploads%2F7pjXIyjgrCScb1A1NQXo%2Fd%26t3.png?alt=media&amp;token=1b33eeae-689a-4df2-ae26-4e37d0c229e0" alt=""><figcaption></figcaption></figure>

* **Selectable dates**: Tick the weekdays (Monday to Sunday) customers can select. For each ticked weekday choose **All day**, or set a **Start time** and an **End time**.

<figure><img src="https://1821185975-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRFiuDpHWm2HwzxPH4lfM%2Fuploads%2FbLOpYw3kQSxprFI4B5RE%2Fd%26t4.png?alt=media&amp;token=b8c130f0-1750-4900-94a3-1b86d86d6895" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://1821185975-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRFiuDpHWm2HwzxPH4lfM%2Fuploads%2FAXmsMANEv2SZjCRGXoHm%2Fd%26t5.png?alt=media&amp;token=8b783331-26e9-400a-a47f-d1c86b64e22c" alt=""><figcaption></figcaption></figure>

* **Deactivated dates**: Block dates or times customers cannot choose. Tick the rules you need:

  * **Cut-off date/time** - enter a **Cut-off value** and a **Unit**. Customers can only select a time after that amount of time from now (for example, 2 days so that orders need two days' notice). The available units depend on what customers select: **Days**, **Weeks** or **Months** for **Date only**; **Minutes** or **Hours** for **Time only**; all five for **Date & time**.
  * **Disable specific dates** - pick each date you want to block, such as public holidays, using **Select date**.
  * **Disable date ranges** - click **Add date range** and pick a start and end date to block a whole period, for example a closure week.
  * **Disable past dates** - block every date before today.

  Disable specific dates, Disable date ranges and Disable past dates are not available when customers select **Time only**.

<figure><img src="https://1821185975-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRFiuDpHWm2HwzxPH4lfM%2Fuploads%2Fg0AMgoopZlsMBsoqGY8n%2Fd%26t6.png?alt=media&amp;token=c266a822-3e0f-48ee-b4c5-665291cbbf07" alt=""><figcaption></figcaption></figure>

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXebGc53a2s5CR_7eOYHJTfwanvULdI5qc5ztVjy0_pxFLNloK13GBZf5Xkh4Bvxk50qMtgsTum4x68fftwsy6hwsn5o8fhqXaPXMZM9CFVXHmp-OTFLjlJa5FWE41X5PREb_g0Zew?key=DC83dM0yOWsDjpoRFQoUWeuE" alt=""><figcaption></figcaption></figure>

**Step 3: Configure Restrictions (If Needed)**

* **Visibility**: Enable visibility if you want the Date & time option to show/hide only when a customer selects a specific option from another field. See [How to set up Conditional logic?](/product-options/advanced-setup/how-to-set-up-conditional-logics.md). A Date & time option can be shown or hidden by other options, but it cannot be used as the trigger of another option's visibility.

<figure><img src="https://1821185975-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRFiuDpHWm2HwzxPH4lfM%2Fuploads%2FXvZB9oefyJM82d93VqFN%2Fd%26t7.png?alt=media&amp;token=b24509b1-cd4a-4994-9b17-d3ad7509bf14" alt=""><figcaption></figcaption></figure>

* Help text: Add a short description to explain the purpose of the Date & Time option. It can be displayed as Tooltips or Content (Below/Beside the option title, Below the option).

<figure><img src="https://1821185975-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRFiuDpHWm2HwzxPH4lfM%2Fuploads%2FQuPOFaTNrfcSrVdRewuk%2Fd%26t8.png?alt=media&amp;token=ee41ff23-6410-40dd-a7e3-a8f4ca27674e" alt=""><figcaption></figcaption></figure>

* **Placeholder**: A short hint shown inside the input field to guide customers on what to enter.

<figure><img src="https://1821185975-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRFiuDpHWm2HwzxPH4lfM%2Fuploads%2Fej7wND4EO1c6Tnj2xrop%2Fd%26t9.png?alt=media&amp;token=b9fc8c18-8a3c-4ea2-9dfc-2cee8ea5761e" alt=""><figcaption></figcaption></figure>

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXf_fpKzGqEHBHwU3lygTzaWFJk_iWIfEPKGWDGDgSh5OGgMBiCnGhykRR-7HH_Er7SmrmE0bX2u3fbftr4Hnp-w5JW86zbivmmkiSkUWrGFEFYcF9hBEoSVEt7WzK9dYzO_wUcXzQ?key=DC83dM0yOWsDjpoRFQoUWeuE" alt=""><figcaption></figcaption></figure>

**Error messages**

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

{% hint style="info" %}
The Date & time option does not support Price add-on or SKU.
{% endhint %}

### 3. Real-World Applications of Date and Time Picker <a href="#id-2-3-real-world-applications-of-date-and-time-picker" id="id-2-3-real-world-applications-of-date-and-time-picker"></a>

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

### 4. Key Features of the Date and Time Picker <a href="#id-2-4-key-features-of-the-date-and-time-picker" id="id-2-4-key-features-of-the-date-and-time-picker"></a>

* Easy for customers to select dates and times without manual typing.
* Supports date-only, time-only, or both combined.
* You can apply blackout dates and restrict available times.
* Perfect for making time-sensitive orders more accurate and smooth.