# Mojo.Widget.TimePicker

## Namespace Detail

### Overview

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.

### Declaration

>     <div x-mojo-element="TimePicker" id="timepickerId" class="timepickerClass"
>       name="timepickerName"></div>

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.

### Events

>     this.controller.listen(this.controller.get("timepickerId"),
>       Mojo.Event.propertyChange', this.handleUpdate);

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

### Instantiation

>     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

### Methods

The TimePicker widget has no methods.