Lightning Components Developer’s Guide
jNewer Version Available
ui:outputDate
Displays a date in the default or specified format based on the user's locale.
A ui:outputDate component represents a date output in the YYYY-MM-DD format and is wrapped in an HTML span tag. This component can be used with ui:inputDate, which takes in a date input. ui:outputDate retrieves the browser's locale information and displays the date accordingly. To display a date, you can use an attribute value and bind it to the ui:outputDate component.
The previous example renders the following HTML.
This example shows how you can bind data from the ui:inputDate 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. | |
| value | String | The output value of the date. It should be a date string in ISO-8601 format (YYYY-MM-DD). | Yes |
Events
| Event Name | Event Type | Description |
|---|---|---|
| mouseup | COMPONENT | Indicates that the user has released the mouse button. |
| mousedown | COMPONENT | Indicates that the user has pressed a mouse key. |
| mousemove | COMPONENT | Indicates that the user has moved the mouse pointer. |
| dblclick | COMPONENT | Indicates that a component has been double-clicked. |
| mouseout | COMPONENT | Indicates that the user has moved the mouse pointer away from the component. |
| click | COMPONENT | Indicates that a component has been clicked. |
| mouseover | COMPONENT | Indicates that the user has moved the mouse pointer over the component. |