TALY - The Allianz Library

Time Component

1. Overview

The TIME component provides a time input field for entering hours and minutes, with optional 12-hour format (AM/PM) and a configurable timepicker dropdown.

🛝 Use the Dynamic Form Playground to see the Time component in action and try out different configurations

2. Key Features

  • 24-hour and 12-hour (AM/PM) format support
  • Optional timepicker dropdown with configurable start/end time and interval
  • Customizable hour and minute placeholders
  • Translation and string interpolation support

3. Configuration Properties

Base Properties

Property Type Required Description
type 'TIME' Yes Specifies the field type as TIME.
id string Yes Unique identifier for the field. The field's value is stored in the form state under this key.
renderName string No Optional name added as data-render-name attribute to locate the rendered element in the DOM.
label string Yes Label text displayed above the field. Supports translation and string interpolation.
value string No Initial value of the field. Accepts HH:mm 24-hour format (e.g. '09:00', '17:30').
hint string No Additional hint text displayed below the field.
note string No Informational note displayed when there are no errors.
infoIcon DfInfoIconConfig No Info icon with popover. Object with popoverText (string, required) and popoverDirection ('top', 'bottom', 'left', 'right').
validators array No Validation rules for the field. Supported types: REQUIRED, MIN_TIME, MAX_TIME, DYNAMIC_MIN_TIME, DYNAMIC_MAX_TIME. Each validator has type and optional errorMessage. For MIN_TIME, use minTime property; for MAX_TIME, use maxTime property. Accepts HH:mm 24-hour format (e.g. '09:00', '17:30').
testId string No Test identifier for automated testing. Set as data-testid attribute.
acl array No Access control rules for field visibility/editability. Each rule has state ('hidden', 'readonly', 'disabled', 'visible', 'editable') and optional condition (Filtrex expression).
columnSpan number No Number of columns to span (1-12) in CUSTOM_COLUMN layout. Default: 12 (full width).
spacing string No Margin spacing before next field: 'NONE' (0px), 'XS' (8px), 'S' (16px), 'M' (24px), 'L' (32px), 'XL' (40px), 'XXL' (48px).

Component Specific Properties

Property Type Required Description
twelveHourFormat boolean Yes Whether to show the time in 12-hour format with AM/PM toggle.
Default: false
withTimepicker boolean Yes Whether to show the timepicker dropdown toggle button.
Default: false
layout object No The layout of the field.
See also Layout Properties
optionalLabel string No Text that is additionally displayed in the label if the field is not mandatory and supports string interpolation.
placeholderHours string No Sets the placeholder of hours field.
Default: "hh".
placeholderMinutes string No Sets the placeholder of minutes field.
Default: "mm".
labelAM string No Sets the AM button label.
Default: "AM".
labelPM string No Sets the PM button label.
Default: "PM".
pickerEndTime string No The latest time shown in the timepicker dropdown, in HH:mm format.
Default: "24:00".
pickerStartTime string No The earliest time shown in the timepicker dropdown, in HH:mm format.
Default: "00:00".
pickerTimeInterval number No The interval in minutes between options in the timepicker dropdown.
Must be at least 1 minute.
Default: 30.

Layout Properties

Property Type Required Description
centerAlignInRetail boolean No Controls the field alignment for "CUSTOM_COLUMN" layout in retail journeys. Set to true to center-align the field. Defaults to left alignment.
Ignored in expert journeys and other pre-defined layouts, which always use left alignment.

4. Configuration Examples

Basic Time Input

Example :
{
  "id": "appointmentTime",
  "type": "TIME",
  "label": "Appointment Time",
  "validators": [
    {
      "type": "REQUIRED",
      "errorMessage": "Please enter a time"
    }
  ]
}

12-Hour Format with AM/PM

Example :
{
  "id": "meetingTime",
  "type": "TIME",
  "label": "Meeting Time",
  "twelveHourFormat": true,
  "labelAM": "AM",
  "labelPM": "PM"
}

Time with Picker Dropdown

Example :
{
  "id": "deliveryTime",
  "type": "TIME",
  "label": "Preferred Delivery Time",
  "withTimepicker": true,
  "validators": [
    {
      "type": "REQUIRED",
      "errorMessage": "Please select a delivery time"
    }
  ]
}

Time with Custom Picker Range and Interval

Example :
{
  "id": "officeHoursTime",
  "type": "TIME",
  "label": "Office Hours",
  "withTimepicker": true,
  "pickerStartTime": "08:00",
  "pickerEndTime": "18:00",
  "pickerTimeInterval": 15
}

Time with Custom Placeholders

Example :
{
  "id": "startTime",
  "type": "TIME",
  "label": "Start Time",
  "placeholderHours": "HH",
  "placeholderMinutes": "MM",
  "optionalLabel": "Optional"
}

Time with Min/Max Validation

Use MIN_TIME and MAX_TIME to enforce a valid time range on manual input. The value must be in HH:mm 24-hour format. To also restrict the picker dropdown to the same range, set pickerStartTime and pickerEndTime to matching values.

Example :
{
  "id": "appointmentTime",
  "type": "TIME",
  "label": "Appointment Time",
  "withTimepicker": true,
  "pickerStartTime": "09:00",
  "pickerEndTime": "17:00",
  "validators": [
    {
      "type": "MIN_TIME",
      "minTime": "09:00",
      "errorMessage": "Please select a time after 09:00"
    },
    {
      "type": "MAX_TIME",
      "maxTime": "17:00",
      "errorMessage": "Please select a time before 17:00"
    }
  ]
}

5. API Reference

For complete API documentation, see the configuration interfaces:

For Aquila component documentation and design guidelines, see Time Field - Aquila Design System.

results matching ""

    No results matching ""