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. We recommend using lightning:formattedDateTime instead of ui:outputDate.

ui:outputDate can be used with ui:inputDate, which takes in a date input. To apply Lightning Design System styling, we recommend that you use lightning:input with type="date" instead of ui:inputDate.

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.

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

The previous example renders the following HTML.

<span>Sep 29, 2014</span>
This example shows how you can bind data from the ui:inputDate component. To apply Lightning Design System styling, we recommend that you use lightning:input with type="date" instead of ui:inputDate.
<aura:component>
 <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
 <aura:attribute name="today" type="Date" default=""/>
 
    <ui:inputDate aura:id="expdate" label="Today's Date" value="{!v.today}" displayDatePicker="true" />      
    <ui:button label="Submit" press="{!c.setOutput}"/> 

 <div aura:id="msg">
  You entered: <ui:outputDate aura:id="oDate" 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 expdate = component.find("expdate").get("v.value");

        var oDate = component.find("oDate");
        oDate.set("v.value", expdate);

    }
})

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