ui:outputDate | Lightning Components Developer Guide

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.

1<aura:attribute name="myDate" type="Date" default="2014-09-29"/>
2<ui:outputDate value="{!v.myDate}"/>

The previous example renders the following HTML.

1<span class="uiOutputDate">Sep 29, 2014</span>

This example shows how you can bind data from the ui:inputDate 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:inputDate aura:id="expdate" label="Today's Date" class="field" value="{!v.today}" displayDatePicker="true" />      
6    <ui:button class="btn" label="Submit" press="{!c.setOutput}"/> 
7
8 <div aura:id="msg" class="hide">
9  You entered: <ui:outputDate aura:id="oDate" 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        var expdate = component.find("expdate").get("v.value");
11
12        var oDate = component.find("oDate");
13        oDate.set("v.value", expdate);
14
15    }
16})

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