Time

A time picker input that lets users select a time. It shows a desktop time selection interface and uses the native time picker on mobile devices.

Use Cases

• Appointment time selection
• Event start/end time selection
• Schedule and availability time selection
• Opening/closing hours
• Data‑bound time fields connected to page data sources

Properties

name

Unique field name. Type: string. This property is required.

label

Label displayed above time picker. Type: string. This property is required.

required

Whether time selection is required. Type: boolean. Default: false.

defaultValue

Default time value in HH:MM format (24‑hour) (not used when dataBinding is set). Type: string.

width

CSS width of the time input container. Type: string. Default: 100%.

Tip:

• full-width – Use '100%' for standalone time fields
• half-width – Use '50%' when pairing two times in Grid (Start Time + End Time)
• quarter-width – Use '25%' when grouping 4 fields in Grid
• auto – Use 'auto' to fit content width (compact time picker)

min

Minimum selectable time in HH:MM format (24‑hour). Prevents selection of earlier times. Type: string.

Visual Impact: Times before min are disabled/grayed out in time picker.

Tip:

• businessHours – Set min: '08:00' for business hours (8 AM)
• range – For end times, set min to start time to ensure end comes after start
• validation – Use min to enforce business rules (e.g., no appointments before 9 AM)

max

Maximum selectable time in HH:MM format (24‑hour). Prevents selection of later times. Type: string.

Visual Impact: Times after max are disabled/grayed out in time picker.

Tip:

• businessHours – Set max: '17:00' for business hours (5 PM)
• validation – Use max to enforce business rules (e.g., no appointments after 6 PM)

step

Time step in seconds. Controls the granularity of time selection intervals. Type: number.

Visual Impact:

• 60 – 1‑minute intervals
• 300 – 5‑minute intervals
• 900 – 15‑minute intervals (common for appointments)
• 1800 – 30‑minute intervals
• 3600 – 1‑hour intervals

Tip:

• appointments – Use 900 (15 minutes) for appointment scheduling
• precise – Use 60 (1 minute) for precise time entry
• hourly – Use 3600 (1 hour) for hourly scheduling

customCss

Custom CSS styles for advanced styling. Parsed as CSS property‑value pairs. Type: string.

Security Note: Parsed by cssParser utility. Tenants only affect their own pages (multi‑tenant isolation enforced).

dataBinding

Data binding configuration to connect time input to page data source field. Automatically populates time value and saves changes back to source. Type: object.

• pageDataSourceRef – Reference to page‑level data source (format: '@page.{dataSourceId}'). Takes precedence over sourceId/sourceType. Type: string.
• sourceId – ID of the data source (database table or API connection). Type: string. Required.
• sourceType – Type of data source. Type: string. Options: table, api. Required.
• operationType – Operation type – 'Get' for single record (input fields use Get). Type: string. Options: Get. Required.
• fieldName – Name of the field/column to bind to (should be time field). Type: string. Required.
• isReadOnly – Whether time input is read‑only (display only, no write back). Type: boolean. Default: false.
• writeOperation – Write operation type when saving changes. Type: string. Options: Create, Update. Default: Update.

Best Practices

• CRITICAL: Group related Time fields in Grid/Flex (Start Time + End Time, Opening + Closing)
• Use clear labels: 'Start Time', 'End Time', 'Appointment Time' (not just 'Time')
• Set required: true for mandatory times
• Use min/max to restrict time selection to business hours or valid ranges
• Use step to control time intervals (60 = 1‑minute steps, 900 = 15‑minute steps)
• Use dataBinding for edit forms to auto‑populate times from data source

Common Mistakes

Stacking Time fields at full width without grouping related times

Why it's a problem: Wastes horizontal space - related times (Start + End, Opening + Closing) should be side‑by‑side

Fix: Group related Time fields in Grid with numColumns: 2 (Start Time + End Time, Opening + Closing)

Using vague labels like 'Time' or 'Time 1'

Why it's a problem: Unclear what time is being requested - confuses users

Fix: Be specific: 'Start Time', 'End Time', 'Appointment Time', 'Opening Time'

Not setting step for appointment scheduling

Why it's a problem: Users can select any minute - leads to odd appointment times like 3:17 PM

Fix: Set step: 900 (15 minutes) for appointment scheduling to get clean intervals: 9:00, 9:15, 9:30, etc.

Not setting required: true for mandatory times

Why it's a problem: No visual indicator that time is required - users skip it and get validation errors

Fix: Set required: true for mandatory times (shows asterisk indicator)