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

This is a basic set up of a date field with a date picker, which displays the field value 1/30/2014. Specifying format="MMMM d, yyyy" renders the field value as January 30, 2014.

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

This example results in the following HTML.

1<div class="uiInput uiInputDate uiInput--default uiInput--input uiInput--datetime">
2  <label class="uiLabel-left form-element__label uiLabel">
3    <span>Birthday</span>
4  </label>
5  <form class="form--stacked form-element">
6      <input placeholder="MMM d, yyyy" type="text">
7      <a class="datePicker-openIcon display" aria-haspopup="true">
8          <span class="assistiveText">Date Picker</span>
9      </a>
10  <a class="clearIcon hide">
11    <span class="assistiveText">Clear Button</span>
12  </a>
13  </form>
14</div>
15<div class="DESKTOP uiDatePicker--default uiDatePicker">
16    <!--Date picker set to visible when icon is clicked-->
17</div>

On desktop, the input tag is wrapped in a form tag. The form factor (DESKTOP, MOBILE, or PHONE) determines the dimensions of the date picker.

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`	Date	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.