Input Date (Deprecated)

We recommend using Lightning Web Components whenever possible. When migrating to Lightning Web Components, use lightning-input with date type.

For more information, see Aura Components in the ui Namespace Are Deprecated.

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.

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

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.

1<aura:component>
2
3  <aura:attribute name="myDate" type="Date" />
4
5  <!-- Value change handler -->
6
7  <aura:handler name="change" value="{!v.myDate}" action="{!c.handleValueChange}" />
8
9  <ui:inputDate
10    aura:id="mySelectedDate"
11    label="Select a date"
12    displayDatePicker="true"
13    value="{!v.myDate}"
14  />
15
16</aura:component>