# Time Picker

The **Time Picker widget** is used to capture a specific time input from the user through a clock-style. It ensures accurate and properly formatted time selection for forms and applications.

## **Common Use Cases**

* Selecting an appointment or meeting time
* Setting reminders or notification times
* Inputting check-in/check-out times

## Widget Properties

### Title:

The **Title** property displays a label above or beside the time picker to indicate what the selected time refers to (e.g., “Select Appointment Time”).

### **Select Time Format**

The **Time Format** property allows you to choose how the time appears, such as:

* 12-hour format (e.g., 02:30 PM)
* 24-hour format (e.g., 14:30)

## **Step-by-Step Guide** to Use the Time Picker Widget <a href="#step-by-step-guide-to-use-the-data-list-widget" id="step-by-step-guide-to-use-the-data-list-widget"></a>

### **Step 1: Add the Widget:** <a href="#step-1-add-the-widget" id="step-1-add-the-widget"></a>

Open the **Widget Panel** on the left, go to the **Field & Headers** section, and pick & drop the **Time Picker Widget** onto your page.

<figure><img src="https://2522808837-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqi6LY8LVcMuHJBhf1S2u%2Fuploads%2FmVJIm1sLMwIdOLK6v9wF%2Fimage.png?alt=media&#x26;token=7ac2040a-c7b3-4256-91b6-173506b5fc7a" alt=""><figcaption></figcaption></figure>

### **Step 2: Set the Title and Time Format**

Add a meaningful title (e.g., “Select Meeting Time”) and choose the desired format (12-hour or 24-hour).

<figure><img src="https://2522808837-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqi6LY8LVcMuHJBhf1S2u%2Fuploads%2FDOZjTXyHlbbJNsxOgC4W%2Fimage.png?alt=media&#x26;token=cff17e59-4955-4ea2-93e6-e1c9dd90002e" alt=""><figcaption></figcaption></figure>

### Step 3: Configure Main Settings <a href="#step-3-configure-main-settings" id="step-3-configure-main-settings"></a>

Click on the widget to access the **Panel Tab**. Customize the label, default time, and alignment as needed to match the design and user expectations.

### Step 4: Define the Rule & Test the Time Picker

Click the **Run/Preview** icon to test the Time Picker. Verify that it accepts valid time input, shows the correct format, and integrates with your data logic as intended.

<figure><img src="https://2522808837-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqi6LY8LVcMuHJBhf1S2u%2Fuploads%2FnrC6zAE4dHBWOR0SBNM8%2Fimage.png?alt=media&#x26;token=a3f53b03-5399-423d-8fd4-d2a77d489cb1" alt=""><figcaption></figcaption></figure>
