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.
<aura:attribute name="myDate" type="Date" default="2014-09-29"/> <ui:outputDate value="{!v.myDate}"/>
The previous example renders the following HTML.
<span class="uiOutputDate">Sep 29, 2014</span>
<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" class="field" value="{!v.today}" displayDatePicker="true" /> <ui:button class="btn" label="Submit" press="{!c.setOutput}"/> <div aura:id="msg" class="hide"> 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); } })
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 |
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. |