Input Date Time (Deprecated)

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

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

A ui:inputDateTime component represents a date and time 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="datetime-local" instead of ui:inputDateTime.

Web apps running on mobiles and tablets use an input field of type datetime-local for all browsers except Internet Explorer. The value is displayed based on the locale of the browser, for example, MMM d, yyyy and h:mm:ss a, which is returned by $Locale.dateFormat and $Locale.timeFormat.

This is a basic set up of a pair of date and time field with a date picker icon. The client-side controller sets the current date and time in the fields. On desktop, the input tag is wrapped in a form tag; the date and time fields display as two separate fields. The time picker displays a list of time in 30-minute increments.

1<!-- Component markup -->
2
3<aura:attribute name="today" type="DateTime" />
4
5<ui:inputDateTime
6  aura:id="expdate"
7  label="Expense Date"
8  class="form-control"
9  value="{!v.today}"
10  displayDatePicker="true"
11/>

1/** Client-Side Controller **/
2var today = new Date();
3// Convert the date to an ISO string
4component.set("v.today", today.toISOString());

When viewed on a mobile or tablet, the ui:inputDateTime component uses the native date and time picker, and the format attribute is not supported in this case. We recommend using the value change handler to retrieve date and time value change on the input field. On iOS devices, selecting a date and time 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="myDateTime" type="DateTime" />
4
5  <!-- Value change handler -->
6
7  <aura:handler name="change" value="{!v.myDateTime}" action="{!c.handleValueChange}" />
8
9  <ui:inputDateTime
10    aura:id="mySelectedDateTime"
11    label="Select a date and time"
12    value="{!v.myDateTime}"
13  />
14
15</aura:component>