TimeInput

TimeInput provides time input with support for 12-hour and 24-hour formats and configurable precision for hours, minutes, and seconds.

Key features:

• Time format support: 12-hour and 24-hour formats with customizable display
• Precision control: Configure precision for hours, minutes, and seconds
• Input validation: Real-time validation with visual feedback for invalid times
• Accessibility: Full keyboard navigation and screen reader support
• Localization: Automatic AM/PM labels based on user locale

Behaviors

This component supports the following behaviors:

Properties

autoFocus

default: false

If this property is set to true, the component gets the focus automatically when displayed.

clearable

default: false

Whether to show a clear button that allows clearing the selected time

When enabled, it displays a clear button that allows users to clear the time input. Change the time value in this app and then click the clear button:

<App>
  <TimeInput initialValue="11:30" />
  <TimeInput clearable="true" initialValue="10:20" />
</App>

<App>
  <TimeInput initialValue="11:30" />
  <TimeInput clearable="true" initialValue="10:20" />
</App>

clearIcon

The icon to display in the clear button.

<App>
  <TimeInput initialValue="11:30" clearIcon="trash" />
</App>

<App>
  <TimeInput initialValue="11:30" clearIcon="trash" />
</App>

clearToInitialValue

default: false

Whether the clear button resets the time input to its initial value

emptyCharacter

default: "-"

Character to use as placeholder for empty time values. If longer than 1 character, uses the first character. Defaults to '-'

Character to use as placeholder for empty time values. If longer than 1 character, uses the first character. Defaults to '-'.

<App>
  <TimeInput emptyCharacter="." />
  <TimeInput emptyCharacter="*" />
  <TimeInput emptyCharacter="abc" />
</App>

<App>
  <TimeInput emptyCharacter="." />
  <TimeInput emptyCharacter="*" />
  <TimeInput emptyCharacter="abc" />
</App>

enabled

default: true

This boolean property value indicates whether the component responds to user events (true) or not (false).

<App>
  <TimeInput enabled="false" initialValue="14:30" />
</App>  

<App>
  <TimeInput enabled="false" initialValue="14:30" />
</App>  

endIcon

This property sets an optional icon to appear on the end (right side when the left-to-right direction is set) of the input.

endText

This property sets an optional text to appear on the end (right side when the left-to-right direction is set) of the input.

gap

This property defines the gap between the adornments and the input area. If not set, the gap declared by the current theme is used.

hour24

default: true

Whether to use 24-hour format (true) or 12-hour format with AM/PM (false)

initialValue

This property sets the component's initial value.

<App>
  <TimeInput initialValue="14:30:15" />
</App>  

<App>
  <TimeInput initialValue="14:30:15" />
</App>  

maxTime

Maximum time that the user can select

minTime

Minimum time that the user can select

readOnly

default: false

Set this property to true to disallow changing the component value.

required

default: false

Whether the time input should be required

Marks the time input as required for form validation.

<App>
  <TimeInput required="true" />
</App>

<App>
  <TimeInput required="true" />
</App>

seconds

default: false

Whether to show and allow input of seconds

startIcon

This property sets an optional icon to appear at the start (left side when the left-to-right direction is set) of the input.

startText

This property sets an optional text to appear at the start (left side when the left-to-right direction is set) of the input.

validationStatus

default: "none"

This property allows you to set the validation status of the input component.

Available values:

<App>
  <TimeInput validationStatus="valid" initialValue="11:30" />
  <TimeInput validationStatus="warning" initialValue="11:30" />
  <TimeInput validationStatus="error" initialValue="11:30" />
</App>

<App>
  <TimeInput validationStatus="valid" initialValue="11:30" />
  <TimeInput validationStatus="warning" initialValue="11:30" />
  <TimeInput validationStatus="error" initialValue="11:30" />
</App>

Events

didChange

This event is triggered when value of TimeInput has changed.

Signature: didChange(newValue: any): void

• newValue: The new value of the component.

Fired when the time value changes. Receives the new time value as a parameter.

The time value changes when the edited input part (hour, minute, second) loses focus or the AM/PM selectro changes.

<App var.selectedTime="No time selected">
  <Text value="{selectedTime}" />
  <TimeInput 
    format="h:m:s a"
    initialValue="07:30:05" 
    onDidChange="(time) => selectedTime = time" />
</App>

<App var.selectedTime="No time selected">
  <Text value="{selectedTime}" />
  <TimeInput 
    format="h:m:s a"
    initialValue="07:30:05" 
    onDidChange="(time) => selectedTime = time" />
</App>

gotFocus

This event is triggered when the TimeInput has received the focus.

Signature: gotFocus(): void

Fired when the time picker receives focus.

<App var.isFocused="{false}">
  <Text value="{isFocused 
    ? 'TimeInput focused' : 'TimeInput lost focus'}" 
  />
  <TimeInput
    format="HH:mm:ss a"
    onGotFocus="isFocused = true"
    onLostFocus="isFocused = false"
    initialValue="14:30"
  />
</App>

<App var.isFocused="{false}">
  <Text value="{isFocused 
    ? 'TimeInput focused' : 'TimeInput lost focus'}" 
  />
  <TimeInput
    format="HH:mm:ss a"
    onGotFocus="isFocused = true"
    onLostFocus="isFocused = false"
    initialValue="14:30"
  />
</App>

invalidTime

Fired when the user enters an invalid time

Signature: invalidTime(value: string): void

• value: The invalid time value that was entered.

Fired when the user enters an invalid time value.

<App var.errorMessage="">
  <Text value="{errorMessage}" />
  <TimeInput 
    onInvalidTime="(error) => errorMessage = 'Invalid time entered'"
    onDidChange="errorMessage = ''" />
</App>

<App var.errorMessage="">
  <Text value="{errorMessage}" />
  <TimeInput 
    onInvalidTime="(error) => errorMessage = 'Invalid time entered'"
    onDidChange="errorMessage = ''" />
</App>

lostFocus

This event is triggered when the TimeInput has lost the focus.

Signature: lostFocus(): void

Exposed Methods

focus

Focus the TimeInput component.

Signature: focus(): void

isoValue

Get the current time value formatted in ISO standard (HH:MM:SS) using 24-hour format, suitable for JSON serialization.

Signature: isoValue(): string | null

setValue

This method sets the current value of the TimeInput.

Signature: set value(value: any): void

• value: The new time value to set for the time picker.

<App>
  <HStack>
    <Button
      label="Set Time to 14:30"
      onClick="picker.setValue('14:30')" />
    <Button
      label="Remove Time"
      onClick="picker.setValue('')" />
  </HStack>
  <TimeInput id="picker" />
</App>

<App>
  <HStack>
    <Button
      label="Set Time to 14:30"
      onClick="picker.setValue('14:30')" />
    <Button
      label="Remove Time"
      onClick="picker.setValue('')" />
  </HStack>
  <TimeInput id="picker" />
</App>

value

You can query the component's value. If no value is set, it will retrieve undefined.

Signature: get value(): any

Parts

The component has some parts that can be styled through layout properties and theme variables separately:

• ampm: The AM/PM indicator.
• clearButton: The button to clear the time input.
• hour: The hour input field.
• minute: The minute input field.
• second: The second input field.

Styling

Theme Variables