Time

The o-time-input component is used in forms for getting or displaying a date and hour input submitted by the user.

The time input is automatically registered on its parent o-form, which provides the value for the input programatically. Its value can be also set manually via the data parameter. This and other attributes are explained on the API section of this page.

Basic example

<o-form editable-detail="no" show-header="no">
   <div fxLayout="column" layout-padding>
      <label class="input-comp-title">{{ 'INPUTS.READ_ONLY' | oTranslate }}</label>
      <o-time-input fxFlex attr="input" label="{{ 'INPUT.BUTTON.TIME' | oTranslate }}" [data]="getValue()"></o-time-input>
    </div>
    <div fxLayout="column" layout-padding>
      <label class="input-comp-title">{{ 'INPUTS.EDITABLE' | oTranslate }}</label>
      <o-time-input attr="input2" label="{{ 'INPUT.BUTTON.TIME' | oTranslate }}" [data]="getValue()" read-only="no" required="yes"
        tooltip="This is an awesome tooltip!" clear-button="yes" format="24"></o-time-input>
    </div>
    <div fxLayout="column" layout-padding>
      <label class="input-comp-title">{{ 'INPUTS.DISABLED' | oTranslate }}</label>
      <o-time-input attr="input3" label="{{ 'INPUT.BUTTON.TIME' | oTranslate }}" enabled="no" [data]="getValue()"></o-time-input>
</o-form>

You can see this and more examples of this component in the OntimizeWeb playground.

Time

Directive: o-time-input

Inherited inputs

• from FormDataComponent:
  • attr
  • automatic-binding
  • automatic-registering
  • clear-button
  • data
  • enabled
  • hide-required-marker
  • label
  • label-visible
  • read-only
  • required
  • sql-type
  • tooltip
  • tooltip-position
  • tooltip-show-delay
  • validators
  • width

Inputs

Inherited outputs

• from FormDataComponent:
  • onChange
  • onValueChange

Outputs