ui:outputDateTime

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.

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>

1({
2    doInit : function(component, event, helper) {
3        var today = new Date();
4        component.set('v.today', today.getFullYear() + "-" + (today.getMonth() + 1) + "-" + today.getDate());
5    },
6    
7    setOutput : function(component, event, helper) {
8    	var cmpMsg = component.find("msg");
9    	$A.util.removeClass(cmpMsg, 'hide');
10    	
11        var todayVal = component.find("today").get("v.value");
12        var oDateTime = component.find("oDateTime");
13        oDateTime.set("v.value", todayVal);
14      
15    }
16})

Attributes

Events