> 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

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

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

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

* Option Name: Enter the label name (e.g., "Select Your Delivery Date", "Book Your Appointment Time").

<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 Selection: Choose whether customers can pick specific Date & time or Date & time range

<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: Select which weekdays customers can choose from and set allowed time ranges for each

<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: Select the display format for dates and times (e.g., MM/DD/YYYY or 24-hour/12-hour clock).

<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 off certain dates by setting cut-off times, disabling specific dates, ranges, or past dates

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

* 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/advanced-setup/other-popular-features/how-to-set-up-conditional-logics.md)

<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 Text: 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>

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