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.
<aura:attribute name="myDateTime" type="Date" default="2014-09-29T00:17:08z"/> <ui:outputDateTime value="{!v.myDateTime}"/>
The previous example renders the following HTML.
<span class="uiOutputDateTime">Sep 29, 2014 12:17:08 AM</span>
This example shows how you can bind data from a ui:inputDateTime component.
<aura:component> <aura:handler name="init" value="{!this}" action="{!c.doInit}"/> <aura:attribute name="today" type="Date" default=""/> <ui:inputDateTime aura:id="today" label="Time" class="field" value="" displayDatePicker="true" /> <ui:button class="btn" label="Submit" press="{!c.setOutput}"/> <div aura:id="msg" class="hide"> You entered: <ui:outputDateTime aura:id="oDateTime" 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 todayVal = component.find("today").get("v.value"); var oDateTime = component.find("oDateTime"); oDateTime.set("v.value", todayVal); } })
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 |
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. |