ui:inputDate

An input field for entering a date.

A ui:inputDate component represents a date input field, which is rendered as an HTML input tag of type text on desktop. To apply Lightning Design System styling, we recommend that you use lightning:input with type="date" instead of ui:inputDate.

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 icon, which displays the field value Jan 30, 2014 based on the locale format. On desktop, the input tag is wrapped in a form tag.

<ui:inputDate aura:id="dateField" label="Birthday" value="2014-01-30" displayDatePicker="true"/>
Selecting A Date on Mobile Devices

When viewed on a mobile or tablet, the ui:inputDate component uses the native date picker, and the format attribute is not supported in this case. We recommend using the value change handler to retrieve date value change on the input field. On iOS devices, selecting a date on the date picker triggers the change handler on the component but the value is bound only on the blur event. This example binds the date value to a value change handler.

<aura:component>
    <aura:attribute name="myDate" type="Date" />
    <!-- Value change handler -->
    <aura:handler name="change" value="{!v.myDate}" action="{!c.handleValueChange}"/>
    
    <ui:inputDate aura:id="mySelectedDate" 
                  label="Select a date" displayDatePicker="true" 
                  value="{!v.myDate}"/>
</aura:component>
This example sets today's date on a ui:inputDate component, retrieves its value, and displays it using ui:outputDate. To apply Lightning Design System styling, we recommend that you use lightning:input with type="date" instead of ui:inputDate. The init handler initializes and sets the date on the component.
<aura:component>
 <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
 <aura:attribute name="today" type="Date" default=""/>
 
    <ui:inputDate aura:id="expdate" label="Today's Date" value="{!v.today}" displayDatePicker="true" />      
    <ui:button label="Submit" press="{!c.setOutput}"/> 

 <div aura:id="msg">
  You entered: <ui:outputDate aura:id="oDate" 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 expdate = component.find("expdate").get("v.value");

        var oDate = component.find("oDate");
        oDate.set("v.value", expdate);

    }
})

Attributes

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.
disabled Boolean Specifies whether the component should be displayed in a disabled state. Default value is "false".
displayDatePicker Boolean Indicates if an icon that triggers the date picker is displayed in the field. The default is false.
errors List The list of errors to be 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 Deprecated. The language locale used to format date time. It only allows to use the value which is provided by Locale Value Provider, otherwise, it falls back to the value of $Locale.langLocale. It will be removed in an upcoming release.
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 as an ISO string.

Events

Event Name Event Type Description
select COMPONENT The event fired when the user selects some text.
blur COMPONENT The event fired when the user moves off from the component.
focus COMPONENT The event fired when the user focuses on the component.
keypress COMPONENT The event fired when the user presses or holds down a keyboard key on the component.
keyup COMPONENT The event fired when the user releases a keyboard key on the component.
keydown COMPONENT The event fired when the user presses a keyboard key on the component.
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.
cut COMPONENT The event fired when the user cuts content to the clipboard.
onError COMPONENT The event fired when there are any validation errors on the component.
onClearErrors COMPONENT The event fired when any validation errors should be cleared.
change COMPONENT The event fired when the user changes the content of the input.
copy COMPONENT The event fired when the user copies content to the clipboard.
paste COMPONENT The event fired when the user pastes content from the clipboard.