Use the wj-input-time directive to add InputTime controls to your AngularJS applications. Note that directive and parameter names must be formatted as lower-case with dashes instead of camel-case. For example:

<p>Here is an InputTime control:</p>
<wj-input-time
  value="theDate"
  format="h:mm tt"
  min="09:00" max="17:00"
  step="15">
</wj-input-time>

Example

This example edits a Date value (that includes date and time information) using an InputDate and an InputTime control. Notice how both controls are bound to the same controller variable, and each edits the appropriate information (either date or time). The example also shows a Calendar control that can be used to select the date with a single click.

The wj-input-time directive extends wijmo.angular.input.WjComboBox with the following attributes:

ng-model

@ Binds the control's value property using the ng-model Angular directive. Binding the property using the ng-model directive provides standard benefits like validation, adding the control's state to the form instance, and so on. To redefine properties on a control that is bound by the ng-model directive, use the wj-model-property attribute.

wj-model-property

@ Specifies a control property that is bound to a scope using the ng-model directive.

control

= A reference to the InputDate control created by this directive.

format

@ The format used to display the selected time.

mask

@ A mask used to validate the input as the user types (see InputMask).

max

@ The earliest valid time (a string in the format "hh:mm").

min

@ The latest valid time (a string in the format "hh:mm").

step

@ The number of minutes between entries in the drop-down list.

value

= The time being edited (as a Date object).

value-changed

& The!@see: valueChanged event handler.

If provided, the min and max attributes are strings in the format "hh:mm". Technically, you can use any full date as defined in the W3C [RFC 3339], which is also the format used with regular HTML5 input elements.