Default Gray Amethyst

Relative Time

<mo-relative-time> | MORelativeTime
Since 1.0 stable

Outputs a localized time phrase relative to the current date and time.

Localization is handled by the browser’s Intl.RelativeTimeFormat API. No language packs are required. 

<!-- Shoelace 2 release date 🎉 -->
<mo-relative-time date="2020-07-15T09:17:00-04:00"></mo-relative-time>

import { MORelativeTime } from '@metsooutotec/modes-web-components/dist/react';

const App = () => <MORelativeTime date="2020-07-15T09:17:00-04:00" />;

The date attribute determines when the date/time is calculated from. It must be a string that Date.parse() can interpret or a Date object set via JavaScript.

Examples

Keeping time in sync

Use the sync attribute to update the displayed value automatically as time passes.

<div class="relative-time-sync">
  <mo-relative-time sync></mo-relative-time>
</div>

<script>
  const container = document.querySelector('.relative-time-sync');
  const relativeTime = container.querySelector('mo-relative-time');

  relativeTime.date = new Date(new Date().getTime() - 60000);
</script>

import { MORelativeTime } from '@metsooutotec/modes-web-components/dist/react';

const date = new Date(new Date().getTime() - 60000);

const App = () => <MORelativeTime date={date} sync />;

Formatting styles

You can change how the time is displayed using the format attribute. Note that some locales may display the same values for narrow and short formats. 



<mo-relative-time date="2020-07-15T09:17:00-04:00" format="narrow"></mo-relative-time><br />
<mo-relative-time date="2020-07-15T09:17:00-04:00" format="short"></mo-relative-time><br />
<mo-relative-time date="2020-07-15T09:17:00-04:00" format="long"></mo-relative-time>

import { MORelativeTime } from '@metsooutotec/modes-web-components/dist/react';

const App = () => (
  <>
    <MORelativeTime date="2020-07-15T09:17:00-04:00" format="narrow" />
    <br />
    <MORelativeTime date="2020-07-15T09:17:00-04:00" format="short" />
    <br />
    <MORelativeTime date="2020-07-15T09:17:00-04:00" format="long" />
  </>
);

Localization

Use the lang attribute to set the desired locale.

English:
Chinese:
German:
Greek:
Russian: 
English: <mo-relative-time date="2020-07-15T09:17:00-04:00" lang="en-US"></mo-relative-time><br />
Chinese: <mo-relative-time date="2020-07-15T09:17:00-04:00" lang="zh-CN"></mo-relative-time><br />
German: <mo-relative-time date="2020-07-15T09:17:00-04:00" lang="de"></mo-relative-time><br />
Greek: <mo-relative-time date="2020-07-15T09:17:00-04:00" lang="el"></mo-relative-time><br />
Russian: <mo-relative-time date="2020-07-15T09:17:00-04:00" lang="ru"></mo-relative-time>

import { MORelativeTime } from '@metsooutotec/modes-web-components/dist/react';

const App = () => (
  <>
    English: <MORelativeTime date="2020-07-15T09:17:00-04:00" lang="en-US" />
    <br />
    Chinese: <MORelativeTime date="2020-07-15T09:17:00-04:00" lang="zh-CN" />
    <br />
    German: <MORelativeTime date="2020-07-15T09:17:00-04:00" lang="de" />
    <br />
    Greek: <MORelativeTime date="2020-07-15T09:17:00-04:00" lang="el" />
    <br />
    Russian: <MORelativeTime date="2020-07-15T09:17:00-04:00" lang="ru" />
  </>
);

Importing

If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free to use any of the following snippets to cherry pick this component.

Bundler React Script

To import this component using a bundler:

import '@metsooutotec/modes-web-components/dist/components/relative-time/relative-time.js';

To import this component as a React component:

import MORelativeTime from '@metsooutotec/modes-web-components/dist/react/relative-time/';

To import this component using a script tag:

<script type="module" src="https://modes-web.metso.com/dist/components/cdn/components/relative-time/relative-time.js"></script>

Properties

Name Description Reflects Type Default
date The date from which to calculate time from. Date | string -
lang The locale to use when formatting the number. string -
format The formatting style to use. 'long' | 'short' | 'narrow' 'long'
numeric When auto, values such as “yesterday” and “tomorrow” will be shown when possible. When always, values such as “1 day ago” and “in 1 day” will be shown. 'always' | 'auto' 'auto'
sync Keep the displayed value up to date as time passes. boolean false
updateComplete A read-only promise that resolves when the component has finished updating.

Learn more about attributes and properties.