ui:outputDateTime | Lightning Components Developer’s Guide

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.

1<aura:attribute name="myDateTime" type="Date" default="2014-09-29T00:17:08z"/>
2<ui:outputDateTime value="{!v.myDateTime}"/>

The previous example renders the following HTML.

1<span class="uiOutputDateTime">Sep 29, 2014 12:17:08 AM</span>

This example shows how you can bind data from a ui:inputDateTime component.

1<aura:component>
2 <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
3 <aura:attribute name="today" type="Date" default=""/>
4 
5    <ui:inputDateTime aura:id="today" label="Time" class="field" value="" displayDatePicker="true" />
6    <ui:button class="btn" label="Submit" press="{!c.setOutput}"/> 
7 
8    <div aura:id="msg" class="hide">
9  You entered: <ui:outputDateTime aura:id="oDateTime" value=""  />
10 </div>
11</aura:component>

1swfobject.registerObject("clippy.codeblock-3", "9");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17({
18    doInit : function(component, event, helper) {
19        var today = new Date();
20        component.set('v.today', today.getFullYear() + "-" + (today.getMonth() + 1) + "-" + today.getDate());
21    },
22    
23    setOutput : function(component, event, helper) {
24    	var el = component.find("msg");
25    	$A.util.removeClass(el.getElement(), 'hide');
26    	
27        var todayVal = component.find("today").get("v.value");
28        var oDateTime = component.find("oDateTime");
29        oDateTime.set("v.value", todayVal);
30      
31    }
32})

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
`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.