# Date and Time Picker

### 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://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**

* Click Add Option > Date and Time Picker to create a new date/time field

<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**

* Option Name: Enter the label name (e.g., "Select Your Delivery Date", "Book Your Appointment Time").
* Date & Time Selection: Choose whether customers can pick specific Date & time or Date & time range
* Selectable Dates: Select which weekdays customers can choose from and set allowed time ranges for each
* Display Date/Time: Select the display format for dates and times (e.g., MM/DD/YYYY or 24-hour/12-hour clock).
* Deactivated Dates: Block off certain dates by setting cut-off times, disabling specific dates, ranges, or past dates

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXeMJAOkPmCO9zNIQjRIWAtFofZAtTJhNM9bDW0tkAZznhruLeU0dA-2rmeO5L2qFZ2x_fDb9tKvPrIVjmMVSQ5zJbX8pAlhPdf5EhtRp7KQqBDi1l-hoOLOwynuh02mQitgxeuS?key=DC83dM0yOWsDjpoRFQoUWeuE" 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)**

* Conditional Logic: Enable conditional logic if you want the Date & Time option to show/hide only when a customer selects a specific option from another field. [How to set up Conditional logic?](/product-options/getting-started/other-popular-features/how-to-set-up-conditional-logics.md)
* 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://lh7-rt.googleusercontent.com/docsz/AD_4nXfXLUEOepTbmdtT5XnylHzl-ptFo4Pt2lpl0clRfne5gNodxjdDjrHN5Cle3WC85XGCqjLc1tChpV9KVu53ZEWeiA7i-iNNRWvtpkYnjvorOhU-V4ucs82qV-4Aum4Q2RCt8qoaeg?key=DC83dM0yOWsDjpoRFQoUWeuE" alt=""><figcaption></figcaption></figure>

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

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

### 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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.optis.me/product-options/18-option-types/others/date-and-time-picker.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.