Namespace Detail


The TimePicker offers selection of the hour and minutes with an AM/PM selector when appropriate. It is one of the simple picker widgets that present their choices as a linear sequence of values that wraps around; when you scroll to the end of the sequence, it simply continues back at the beginning. The Date and Time pickers use the JavaScript Date object to represent the chosen time in their data model.


<div x-mojo-element="TimePicker" id="timepickerId" class="timepickerClass"

Properties Required Value Description
x-mojo-element Required TimePicker Declares the widget as type 'TimePicker'.
id Required Any String Identifies the widget element for use when instantiating or rendering.
class Optional Any String There is no default class for TimePicker, but you can assign one if you want to apply custom styling.
name Optional Any String Adds a unique name to the TimePicker widget; generally used in templates.


  Mojo.Event.propertyChange', this.handleUpdate);

Event Type Value Event Handling
Mojo.Event.propertyChange event.value or model.time Respond to TimePicker value change.


var currentTime = new Date();this.controller.setupWidget("timepickerId",
  this.attributes = {
      label: 'Time',
      modelProperty: 'time'
  this.model = {
      time: currentTime

Attribute Properties

Attribute Property Type Required Default Description
label String Optional 'Time' Label displayed for the widget controls
labelPlacement String Optional Mojo.Widget.labelPlacementLeft Mojo.Widget.labelPlacementRight: places label on right, value on left
Mojo.Widget.labelPlacementLeft: places label on left, value on right
modelProperty String Optional time Model property name for date object
minuteInterval Integer Optional 5 Interval between minute selection options

Model Properties

Model Property Type Required Default Description
time Date Object Required null Date object to set initial widget value and updated value after user selection


The TimePicker widget has no methods.