> For the complete documentation index, see [llms.txt](https://docs.stylemixthemes.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.stylemixthemes.com/cost-calculator-builder/calculator-elements/time-picker-pro-feature.md).

# Time Picker (Pro feature)

## What is a Time Element? 

**Time element** is a feature in the **Cost Calculator**. It allows users to choose a specific time or a range of time for providing a service or making an appointment. It is **available** in the **Pro version** of Cost Calculator. If you are using the free version, you can upgrade to the Pro version to access this element. 

{% tabs %}
{% tab title="Time Picker (Single Time)" %}

<figure><img src="https://834137925-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDTO7zmTA5-HpvK8JDA%2Fuploads%2F4WjPvSZ6efzXT2aUnLtG%2Fimage.png?alt=media&amp;token=4551891b-1d2d-4890-a5a6-b487b43f273b" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Time Range" %}

<figure><img src="https://834137925-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDTO7zmTA5-HpvK8JDA%2Fuploads%2FX1lJdXCpKjlM7D986b4d%2Fimage.png?alt=media&amp;token=6d9b15db-6a8b-44c9-9151-8bc84e3307b6" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

There are two modes available for time arrangement: basic and advanced. In the basic mode, users can select a particular time. In the advanced mode, they can choose a range of times, such as between 12 pm and 3 pm.

## When Can You Use It?&#x20;

You can use the Time element in many cases. Whether your website users need to schedule appointments, bookings, or services.&#x20;

Some examples of use cases of the Time element for your users:

* when selecting the time for yearbook pickup or delivery
* when choosing the time slot for their agency service appointment
* when scheduling a specific time for their legal consultation
* when booking a time slot to view a property they are interested in
* when selecting the desired time for their taxi service pickup
* when choosing their check-in and check-out times for their hotel stay
* when booking a table for dinner at a specific time
* when scheduling business coaching sessions at their preferred time
* when selecting the pick-up and return times for their car rental

## Element Settings

The element's primary configuration options can be modified in the Element tab. The Time Picket element contains the following attributes in the Element tab:

<figure><img src="https://834137925-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDTO7zmTA5-HpvK8JDA%2Fuploads%2Fara4kO8aefjFt0ZdqIwq%2Fimage.png?alt=media&amp;token=8024e054-3c8c-4cda-a496-9877bb266d89" alt=""><figcaption></figcaption></figure>

* **Element Name** - title of the field.
* **Description** - brief description of the field that will be displayed with the element name.
* **Hours | Minutes** - here you can enter the placeholder instead of the default *hh* and *mm* in the time picker field.
* **Element width -** set the width of the field relative to the width of the calculator in 100% scale. You will see the changes in real time.
* Mode - select one of the two available time modes for the element:
  * [**Single Time**](#time-picker-single-time) - lets users select a specific time only. E.g: *13:35*.
  * [**Time Range**](#time-range) - lets users choose an interval of time. E.g, *from 10:20 to 17:35*.
    * **Set Minimum interval** - here you can specify the minimum interval for the time range. You can enter in a format: *2h 23m.*
* **24-hour format** - enable this to change the time mode from 12-hour format (am & pm) to 24-hour time format&#x20;

{% tabs %}
{% tab title="24-hour format" %}

<figure><img src="https://834137925-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDTO7zmTA5-HpvK8JDA%2Fuploads%2F4WjPvSZ6efzXT2aUnLtG%2Fimage.png?alt=media&amp;token=4551891b-1d2d-4890-a5a6-b487b43f273b" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="12-hour format" %}

<figure><img src="https://834137925-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDTO7zmTA5-HpvK8JDA%2Fuploads%2FHI8gcVcrg2zV6ZcbN4eO%2Fimage.png?alt=media&amp;token=77716c23-0cd0-4f3d-bfc1-3ca80bead273" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

## Settings Tab

<figure><img src="https://834137925-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDTO7zmTA5-HpvK8JDA%2Fuploads%2FyIM1yZCdOxqFGC9bE1DV%2Fimage.png?alt=media&amp;token=bfb3cd1f-cd60-4db8-9bcf-d74b00c45e29" alt=""><figcaption></figcaption></figure>

* **Required** - Defines whether the element will be required to be filled or not.
* **Show in Grand Total** - Disable if you want to hide the element in Grand Total.
* **Hidden by Default** - The element will be hidden by default. You can make it visible using [**conditional system**](https://docs.stylemixthemes.com/cost-calculator-builder/calculator-elements/pages/OneKKwO4j2k65VfBcrvD#id-1.-hidden-by-default).
* **Additional Classes** - Add [extra classes](/cost-calculator-builder/plugin-features/additional-classes.md) to the HTML elements to further style changes


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

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

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://docs.stylemixthemes.com/cost-calculator-builder/calculator-elements/time-picker-pro-feature.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

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.