Lightning Components Developer’s Guide

Clouds with binary code floating aboveCloud with binary code floating above

No Results

Search Tips:

  • Please consider misspellings
  • Try different search keywords
PDF

Newer Version Available

This content describes an older version of this product. View Latest

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. ui:inputDate

ui:outputDate
Date and Time An input field for entering a date and time of type text. ui:inputDateTime

ui:outputDateTime

Using the Date and Time Fields

This is a basic set up of a date field with a date picker.

1swfobject.registerObject("clippy.codeblock-0", "9");<ui:inputDate aura:id="dateField" label="Birthday" value="2000-01-01" displayDatePicker="true"/>

This example results in the following HTML.

1swfobject.registerObject("clippy.codeblock-1", "9");<div class="uiInput uiInputDate">
2  <label class="uiLabel-left uiLabel">
3    <span>Birthday</span>
4  </label>
5  <input placeholder="MMM d, yyyy" type="text" class="uiInput uiInputDate">
6  <a class="datePicker-openIcon" aria-haspopup="true">
7    <span class="assistiveText">Date Picker</span>
8  </a>
9  <div class="uiDatePicker">
10    <!--Date picker set to visible when icon is clicked-->
11  </div>
12</div>

Localizing the Date and Time

The following code is a basic set up of a date and time field with client-side localization, which renders as Mai 8, 2013 9:00:00 AM.

1swfobject.registerObject("clippy.codeblock-2", "9");<ui:outputDateTime langLocale="de" timezone="Europe/Berlin" value="2013-05-08"/>

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.

1swfobject.registerObject("clippy.codeblock-3", "9");<!-- 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}