lightning:formattedDateTime (Beta)

Displays formatted date and time.

A lightning:formattedDateTime component displays formatted date and time. The locale set in the app's user preferences determines the formatting.

Here are some examples based on a locale of en-US.

Displays: 8/2/2016

<aura:component>
    <lightning:formattedDateTime value="1470174029742" />
</aura:component>
    

Displays: Tuesday, Aug 02, 16

<aura:component>
    <lightning:formattedDateTime value="1470174029742" year="2-digit" month="short" day="2-digit" weekday="long"/>
</aura:component>
    

Displays: 8/2/2016, 3:15 PM PDT

<aura:component>
    <lightning:formattedDateTime value="1470174029742" year="numeric" month="numeric" day="numeric"  hour="2-digit" minute="2-digit" timeZoneName="short" />
</aura:component>
    
Usage Considerations

This component provides fallback behavior in Apple Safari 10 and below. The following formatting options have exceptions when using the fallback behavior in older browsers.

  • era is not supported.
  • timeZoneName appends GMT for short format, GMT-h:mm or GMT+h:mm for long format.
  • timeZone supports UTC. If another timezone value is used, lightning:formattedDateTime uses the browser timezone.

Attributes

Attribute Name Attribute Type Description Required?
body Component[] The body of the component. In markup, this is everything in the body of the tag.
day String Allowed values are numeric or 2-digit.
era String Allowed values are narrow, short, or long.
hour String Allowed values are numeric or 2-digit.
hour12 Boolean Determines whether time is displayed as 12-hour. If false, time displays as 24-hour. The default setting is determined by the user's locale.
minute String Allowed values are numeric or 2-digit.
month String Allowed values are 2-digit, narrow, short, or long.
second String Allowed values are numeric or 2-digit.
timeZone String The time zone to use. Implementations can include any time zone listed in the IANA time zone database. The default is the runtime's default time zone. Use this attribute only if you want to override the default time zone.
timeZoneName String Allowed values are short or long. For example, the Pacific Time zone would display as 'PST' if you select 'short', or 'Pacific Standard Time' if you select 'long.'
value Object The value to be formatted, which can be a Date object or timestamp. Yes
weekday String Allowed values are narrow, short, or long.
year String Allowed values are numeric or 2-digit.