ui:inputDate | Lightning Components Developer Guide

A ui:inputDate component represents a date 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 date for all browsers except Internet Explorer. The value is displayed based on the locale of the browser, for example, MMM d, yyyy, which is returned by $Locale.dateFormat.

This is a basic set up of a date field with a date picker, which displays the field value Jan 30, 2014 based on the locale format. On desktop, the input tag is wrapped in a form tag.

1<ui:inputDate aura:id="dateField" label="Birthday" value="2014-01-30" displayDatePicker="true"/>

This example sets today's date on a ui:inputDate component, retrieves its value, and displays it using ui:outputDate. The init handler initializes and sets the date on the component.

1<aura:component>
2 <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
3 <aura:attribute name="today" type="Date" default=""/>
4 
5    <ui:inputDate aura:id="expdate" label="Today's Date" class="field" value="{!v.today}" displayDatePicker="true" />      
6    <ui:button class="btn" label="Submit" press="{!c.setOutput}"/> 
7
8 <div aura:id="msg" class="hide">
9  You entered: <ui:outputDate aura:id="oDate" 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        component.set('v.deadline', today);
6    },
7    
8    setOutput : function(component, event, helper) {
9    	var cmpMsg = component.find("msg");
10    	$A.util.removeClass(cmpMsg, 'hide');
11        var expdate = component.find("expdate").get("v.value");
12        
13        var oDate = component.find("oDate");
14        oDate.set("v.value", expdate);
15        
16    }
17})

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.