A ui:outputDateTime component represents a date and time output that is wrapped in an HTML span tag. We recommend using lightning:formattedDateTime instead of ui:outputDateTime.
This component can be used with ui:inputDateTime, which takes in a date input. To apply Lightning Design System styling, we recommend that you use lightning:input with type="datetime-local" instead of ui:inputDateTime.
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.
<aura:attribute name="myDateTime" type="Date" default="2014-09-29T00:17:08z"/> <ui:outputDateTime value="{!v.myDateTime}"/>
The previous example renders the following HTML.
<span>Sep 29, 2014 12:17:08 AM</span>
This example shows how you can bind data from a ui:inputDateTime component.
<aura:component> <aura:handler name="init" value="{!this}" action="{!c.doInit}"/> <aura:attribute name="today" type="Date" default=""/> <ui:inputDateTime aura:id="today" label="Time" value="" displayDatePicker="true" /> <ui:button label="Submit" press="{!c.setOutput}"/> <div aura:id="msg"> You entered: <ui:outputDateTime aura:id="oDateTime" value="" /> </div> </aura:component>
({ doInit : function(component, event, helper) { var today = new Date(); component.set('v.today', today.getFullYear() + "-" + (today.getMonth() + 1) + "-" + today.getDate()); }, setOutput : function(component, event, helper) { var cmpMsg = component.find("msg"); $A.util.removeClass(cmpMsg, 'hide'); var todayVal = component.find("today").get("v.value"); var oDateTime = component.find("oDateTime"); oDateTime.set("v.value", todayVal); } })
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 | Deprecated. The language locale used to format date value. It only allows to use the value which is provided by Locale Value Provider, otherwise, it falls back to the value of $Locale.langLocale. It will be removed in an upcoming release. | |
timezone | String | The timezone ID, for example, America/Los_Angeles. | |
value | String | An ISO8601-formatted string representing a date time. | Yes |
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. |