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. The value is displayed in the default format specified by the language locale of the browser.

This is a basic set up of a date and time field with a date picker, which displays the current date and time in the format 7/29/2014 1:11 PM.

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 results in the following HTML.

1<div class="uiInput uiInputDateTime uiInput--default uiInput--input uiInput--datetime">
2<label class="uiLabel-left form-element__label uiLabel">
3    <span>Expense Date</span>
4</label>
5<form class="form--stacked">
6    <div class="dateTime-inputDate form-element form-element__control">
7        <input class="form-control uiInput uiInputDateTime" placeholder="MMM d, yyy" type="text">
8        <a class="datePicker-openIcon display" aria-haspopup="true">
9            <span class="assistiveText">Date Picker</span>
10        </a>
11    </div>
12    <div class="dateTime-inputTime form-element form-element__control">
13        <div class="input-has-icon input-has-icon--right">
14             <label></label>
15             <input class="fieldinput" aria-describedby="" type="text" placeholder="h:mm a">
16                <a aria-haspopup="true" class="timePicker-openIcon display" href="javascript:void(0);">
17                    <span class="assistiveText">Time Picker</span>
18                </a>
19            </div>
20        </div>
21        <div class="uiInputTimePicker--default uiInputTimePicker" >
22            <div aria-hidden="false" data-selection="time" class="dropdown dropdown--left datepicker datepicker--time scrollable">
23                <ul class="datepicker--time__list" role="menu" ></ul>
24            </div>
25        </div>
26</form>
27</div>
28<div class="DESKTOP uiDatePicker--default uiDatePicker">
29    <!-- Date picker set to visible when icon is clicked -->
30</div>

On desktop, the input tag is wrapped in a form tag; the date and time fields display as two separate fields. The form factor (DESKTOP, MOBILE, or PHONE) determines the dimensions of the date picker. The time picker displays a list of time in 30-minute increments.

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.