A ui:inputDateTime component represents a date and time input field, which is rendered as an HTML input tag of type text on desktop. 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.
<!-- Component markup --> <aura:attribute name="today" type="DateTime" /> <ui:inputDateTime aura:id="expdate" label="Expense Date" class="form-control" value="{!v.today}" displayDatePicker="true" /> /** Client-Side Controller **/ var today = new Date(); // Convert the date to an ISO string component.set("v.today", today.toISOString());
Selecting A Date and Time on Mobile Devices
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.
<aura:component> <aura:attribute name="myDateTime" type="DateTime" /> <!-- Value change handler --> <aura:handler name="change" value="{!v.myDateTime}" action="{!c.handleValueChange}"/> <ui:inputDateTime aura:id="mySelectedDateTime" label="Select a date and time" value="{!v.myDateTime}"/> </aura:component>
<aura:component> <aura:handler name="init" value="{!this}" action="{!c.doInit}"/> <aura:attribute name="today" type="Date" default=""/> <ui:inputDateTime aura:id="today" label="Time" class="field" value="" displayDatePicker="true" /> <ui:button class="btn" label="Submit" press="{!c.setOutput}"/> <div aura:id="msg" class="hide"> You entered: <ui:outputDateTime aura:id="oDateTime" 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 todayVal = component.find("today").get("v.value"); var oDateTime = component.find("oDateTime"); oDateTime.set("v.value", todayVal); } })
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 | Indicate if ui:datePicker is displayed. | |
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 | The language locale used to format date time. | |
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. |
Event Name | Event Type | Description |
---|---|---|
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. |
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. |
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. |