ui:inputDateTime | Lightning Components Developer Guide

A ui:inputDateTime component represents a date and time input field, which is rendered as an HTML input tag of type text on desktop. Web apps running on mobiles and tablets use an input field of type datetime-local for all browsers except Internet Explorer. The value is displayed based on the locale of the browser, for example, MMM d, yyyy and h:mm:ss a, which is returned by $Locale.dateFormat and $Locale.timeFormat.

This is a basic set up of a date and time field with a date picker, which displays the current date and time. On desktop, the input tag is wrapped in a form tag; the date and time fields display as two separate fields. The time picker displays a list of time in 30-minute increments.

1<!-- Component markup -->
2<aura:attribute name="today" type="DateTime" />
3<ui:inputDateTime aura:id="expdate" label="Expense Date" class="form-control"
4   value="{!v.today}" displayDatePicker="true" />
5   
6/** Client-Side Controller **/
7 var today = new Date(); 
8component.set("v.today", today);

This example retrieves the value of a ui:inputDateTime component and displays it using ui:outputDateTime.

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

Attribute Name	Attribute Type	Description
`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.
`disabled`	Boolean	Specifies whether the component should be displayed in a disabled state. Default value is "false".
`displayDatePicker`	Boolean	Indicate if ui:datePicker is displayed.
`format`	String	The java.text.SimpleDateFormat style format string.
`label`	String	The text of the label component
`labelClass`	String	The CSS class of the label component
`langLocale`	String	The language locale used to format date time.
`required`	Boolean	Specifies whether the input is required. Default value is "false".
`requiredIndicatorClass`	String	The CSS class of the required indicator component
`updateOn`	String	Updates the component's value binding if the updateOn attribute is set to the handled event. Default value is "change".
`value`	String	The input value of the date/time.

Events

Event Name	Event Type	Description
`dblclick`	COMPONENT	Indicates that a component has been double-clicked.
`mouseover`	COMPONENT	Indicates that the user has moved the mouse pointer over the component.
`mouseout`	COMPONENT	Indicates that the user has moved the mouse pointer away from the component.
`mouseup`	COMPONENT	Indicates that the user has released the mouse button.
`mousemove`	COMPONENT	Indicates that the user has moved the mouse pointer.
`click`	COMPONENT	Indicates that a component has been clicked.
`mousedown`	COMPONENT	Indicates that the user has pressed a mouse key.
`select`	COMPONENT	Indicates that the user has made a selection.
`blur`	COMPONENT	Indicates that a component has been put out of focus.
`focus`	COMPONENT	Indicates that a component has been put on focus.
`keypress`	COMPONENT	Indicates that the user has pressed and held down a keyboard key.
`keyup`	COMPONENT	Indicates that the user has released a keyboard key.
`keydown`	COMPONENT	Indicates that the user has pressed and released a keyboard key.
`cut`	COMPONENT	Indicates that the user has cut content to the clipboard.
`validationError`	COMPONENT	Indicates that the component has validation error(s).
`clearErrors`	COMPONENT	Indicates that any validation error should be cleared.
`change`	COMPONENT	Indicates that the content of a component or the state has changed.
`copy`	COMPONENT	Indicates that the user has copied content to the clipboard.
`paste`	COMPONENT	Indicates that the user has pasted content from the clipboard.