Lightning Components Developer Guide
jNewer Version Available
Date and Time Fields
Date and time fields provide client-side localization, date picker support, and support for common keyboard and mouse events. If you want to render the output from these field components, use the respective ui:output components. For example, to render the output for the ui:inputDate component, use ui:outputDate.
Date and Time fields are represented by the following components.
| Field Type | Description | Related Components |
|---|---|---|
| Date | An input field for entering a date of type text. Provide a date picker by setting displayDatePicker="true". Web apps running on mobiles and tablets use an input field of type date. |
ui:inputDate ui:outputDate |
| Date and Time | An input field for entering a date and time of type text. Provide a date picker and time picker by setting displayDatePicker="true". On desktop, the date and time fields display as two separate fields. The time picker displays a list of time in 30-minute increments. Web apps running on mobiles and tablets use an input field of type datetime-local. |
ui:inputDateTime ui:outputDateTime |
Using the Date and Time Fields
This is a basic set up of a date field with a date picker.
1<ui:inputDate aura:id="dateField" label="Birthday" value="2000-01-01" 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>Binding Field Values
You can bind field values to a field in an object using expressions such as {!v.myAttribute.Name} or {!v.myAttribute.namespace__MyField__c}, and saving an input value via an Apex controller. For an example, see Create a Standalone Lightning App.
Styling Your Date and Time Fields
You can style the appearance of your date and time field and output in the CSS resource of your component.
The following example provides styles to a ui:inputDateTime component with the myStyle selector.
1<!-- Component markup -->
2<ui:inputDateTime class="myStyle" label="Date" displayDatePicker="true"/>
3
4/* CSS */
5.THIS .myStyle {
6 border: 1px solid #dce4ec;
7 border-radius: 4px;
8}