Timepicker Component — fgta5js Documentation

Overview

Inheritance Notice: Class Timepicker inherits all of its core state tracking, validation logic, editing mode configurations, and event handlers from the abstract base class Input.

The Timepicker class wraps standard HTML time input elements within the fgta5js framework. It enforces a standard time format (HH:MM) for input values, updates a readonly display element, and handles boundaries such as min and max time limits.

Interactive Playground

Try interacting with the live component below and watch how the internal states change dynamically.

Live Preview

Component State

.value ""

.InEditMode true

.getLastValue() ""

.isChanged() false

HTML Markup

Define time inputs using standard HTML. Use fgta5-component="Timepicker" to enable binding.

<form id="myform" locked="true">
  <!-- Timepicker Input -->
  <div class="demo-input-field" field="obj_time">
    <label for="obj_time">Schedule Time</label>
    <input id="obj_time" fgta5-component="Timepicker" placeholder="Select time" required>
  </div>
</form>

Initialize and render the form in JavaScript:

const form = new $fgta5.Form('myform');
form.render()

Properties

Property	Type	Description
`value`	`String`	Get or set the current time value. Returns time string in 24-hour format (`HH:MM`).
`min`	`String`	Get or set the minimum valid time limit boundary (`HH:MM`).
`max`	`String`	Get or set the maximum valid time limit boundary (`HH:MM`).
`InEditMode`	`Boolean`	Gets the current edit/readonly state of the component (Read-only). To modify, use `setEditingMode()`.
`disabled`	`Boolean`	Gets or sets the component disabled state.

Methods

Method	Arguments	Description
`constructor(id)`	`(id: String)`	Creates and binds a new `Timepicker` instance to the HTML element using the specified ID.
`setEditingMode(ineditmode)`	`(ineditmode: Boolean)`	Toggles editing mode. Setting to `false` locks the component as read-only and clears errors.
`suspend(doSuspend)`	`(doSuspend: Boolean)`	Suspends or reactivates input interaction.
`isSuspended()`	`()`	Checks if the component is suspended.
`newData(initialvalue)`	`(initialvalue: String)`	Initializes the input with a new value (defaults to '00:00') and resets change detection states.
`getLastValue()`	`()`	Returns the last committed/saved value string.
`isChanged()`	`()`	Checks if the current `value` differs from the last saved state value.
`focus()`	`()`	Programmatically shifts focus onto the time field display element.

HTML Attributes

Attribute	Values	Description
`min`	`String (HH:MM)`	Lower time boundary validation constraint.
`max`	`String (HH:MM)`	Upper time boundary validation constraint.
`required`	N/A	Marks the component as required.
`data-tabindex`	`Number`	Sets the native tabindex on the final rendered input component.