> For the complete documentation index, see [llms.txt](https://docs.yaycommerce.com/yayextra/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.yaycommerce.com/yayextra/how-it-works/option-types/time-picker-option-with-conditional-logic.md).

# Time Picker Option (with Conditional Logic)

The GIF example below shows how we selected the **Time Picker Option,** named it **Delivery Time**

We can also add **Class** (for CSS purposes) and make other settings in the **Advanced Settings** tab and **Conditional Logics** tab.

<figure><img src="/files/BUYRDqGx9AbcK5RQs0Fm" alt=""><figcaption></figcaption></figure>

**Conditional Logic**

In this **Time Picker Option** example, we set a conditional logic that would only make the **Delivery Time** become visible on the product page if the **Delivery Date** is interacted with and a date is selected within a **specified date** on the calendar **( 26th - 31st ).**

<figure><img src="/files/gyJXwTd6ZnfBOUTaxlIe" alt=""><figcaption><p>A GIF image showing how the Time Picker Option's condition shows in the frontend.</p></figcaption></figure>