---
schema_version: "1"
id: 68ae18f293c0a69a31418f47afb86b0533ba11e1ba6a49627e3f2718e6a4253d
title: Relative Date Time
collection: developer
version: current
locale: en-us
portal_url: https://docs.salesforce.com/developer/current/en-us/lightning-base-components/lightning-design-system/guides/lwc/components/lightning/relativeDateTime/lightning-relative-date-time.md
canonical_url: https://developer.salesforce.com/docs/platform/lightning-component-reference/guide/lightning-relative-date-time.html
source_site: developer.salesforce.com
content_type: documentation
content_hash: 9db5aea5be443681398fc0a16b09e3ead932c455f5573d598e3313fcc099556d
products:
  - Lightning Component Reference
---

# Relative Date Time

**`lightning-relative-date-time`**

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

**For Use In**

Lightning Experience, Experience Builder Sites, Salesforce Mobile App, Lightning Out (Beta), Standalone Lightning App

::::::tabset{tabs='["Example", "Develop", "Specifications"]'}

:::::tab

::component-playground{component="relativeDateTime" model="lwc" namespace="lightning"}


:::::

:::::tab

The `lightning-relative-date-time` component displays relative time that shows
how much time has passed or how much time is left until a given date/time.
It formats the relative time for the current locale following the rules
from [Unicode CLDR](http://cldr.unicode.org/translation/date-time-1/date-time-names).

Use the `value` attribute to pass the date to format.
When you provide a timestamp or JavaScript Date object,
`lightning-relative-date-time` displays a string that describes the relative
time between the current time and the provided time.

The unit of time that's displayed 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.

<!-- prettier-ignore-start -->
```html
<template>
    <div>
        <lightning-relative-date-time value={past}>
        </lightning-relative-date-time>
    </div>
    <div>
        <lightning-relative-date-time value={future}>
        </lightning-relative-date-time>
    </div>
</template>
```
<!-- prettier-ignore-end -->

The `past` and `future` attributes return:

- 2 hours ago
- in 2 days

```javascript
import { LightningElement } from "lwc";
export default class MyComponentName extends LightningElement {
  get past() {
    return Date.now() - 2 * 60 * 60 * 1000;
  }
  get future() {
    return Date.now() + 2 * 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 user's language setting in an org determines the language displayed for the units of time. If the locale uses a different language, the output uses the language setting and ignores the locale. For example, if you set the locale to Arabic and the language to English, the output uses digits 0-9 for numbers and English instead of Arabic numerals to be consistent with the language on the user interface. For more information, see [Supported Languages](https://help.salesforce.com/articleView?id=faq_getstart_what_languages_does.htm).

Supported units of time include:

- seconds
- minutes
- hours
- days
- months
- years

To obtain the language and locale information in your org, use the `@salesforce/i18n` scoped module. For more information, see [Access Internationalization Properties](https://developer.salesforce.com/docs/platform/lwc/guide/create-i18n).

This component doesn't support localization in LWR Sites.


:::::

:::::tab
::component-specification{component="relativeDateTime" model="lwc" namespace="lightning"}

:::::

::::::