Time

Time picker input for selecting times. Provides time selection interface on desktop and native time picker on mobile.

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.

label

Label displayed above time picker. Type: string.

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