lightning:relativeDateTime

Displays the relative time difference between the source date-time and the provided date-time.

When you provide a timestamp or JavaScript Date object, lightning:relativeDateTime displays a string that describes the relative time between the current time and the provided time.

The unit of time that's used corresponds to how much time has passed since the provided time, for example, "a few seconds ago" or "5 minutes ago". A given time in the future returns the relative time, for example, "in 7 months" or "in 5 years".

This example returns the relative time between the current time and a given time in the past and future. The time differences are set by the init handler.

<aura:component>
    <aura:handler name="init" value="{! this }" action="{! c.init }" />
    <aura:attribute name="past" type="Object"/>
    <aura:attribute name="future" type="Object"/>
    <p><lightning:relativeDateTime value="{! v.past }"/></p>
    <p><lightning:relativeDateTime value="{! v.future }"/></p>
</aura:component>

The client-side controller is called during component initialization. The past and future attributes return:

  • 2 hours ago
  • in 2 days
({
    init: function (cmp) {
        cmp.set('v.past', Date.now()-(2\*60\*60\*1000));
        cmp.set('v.future', Date.now()+(2\*24\*60\*60\*1000));
    }
})

Other sample output includes:

  • Relative past: a few seconds ago, a minute ago, 2 minutes ago, an hour ago, 2 hours ago, 2 days ago, 2 months ago, 2 years ago
  • Relative future: in a few seconds, in a minute, in 2 minutes, in an hour, in 2 hours, in 2 days, in 2 months, in 2 years in 2 days, in 2 months

The units of time are localized using the user's locale, which returns a language code such as en-US. Supported units of time include:

  • seconds
  • minutes
  • hours
  • days
  • months
  • years

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.
value Object The timestamp or JavaScript Date object to be formatted. Yes