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

Step 1: Add the Widget:

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

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

Step 3: Configure Main Settings

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.