Lightning Components Developer Guide
jNewer Version Available
ui:outputDateTime
Displays a date, time in a specified or default format based on the user's locale.
A ui:outputDateTime component represents a date and time output that is wrapped in an HTML span tag. This component can be used with ui:inputDateTime, which takes in a date input. ui:outputDateTime retrieves the browser's locale information and displays the date accordingly. To display a date and time, you can use an attribute value and bind it to the ui:outputDateTime component.
The previous example renders the following HTML.
This example shows how you can bind data from a ui:inputDateTime component.
Attributes
| Attribute Name | Attribute Type | Description | Required? |
|---|---|---|---|
| body | Component[] | The body of the component. In markup, this is everything in the body of the tag. | |
| class | String | A CSS style to be attached to the component. This style is added in addition to base styles output by the component. | |
| format | String | A string (pattern letters are defined in java.text.SimpleDateFormat) used to format the date and time of the value attribute. | |
| langLocale | String | The language locale used to format date value. | |
| timezone | String | The timezone ID, for example, America/Los_Angeles. | |
| value | String | An ISO8601-formatted string representing a date time. | Yes |
Events
| Event Name | Event Type | Description |
|---|---|---|
| dblclick | COMPONENT | The event fired when the user double-clicks the component. |
| mouseover | COMPONENT | The event fired when the user moves the mouse pointer over the component. |
| mouseout | COMPONENT | The event fired when the user moves the mouse pointer away from the component. |
| mouseup | COMPONENT | The event fired when the user releases the mouse button over the component. |
| mousemove | COMPONENT | The event fired when the user moves the mouse pointer over the component. |
| click | COMPONENT | The event fired when the user clicks on the component. |
| mousedown | COMPONENT | The event fired when the user clicks a mouse button over the component. |