ember-intl

Appearance

formatRelativeTime

Uses Intl.RelativeTimeFormat to format the time relative to now.

gts
import type { TOC } from '@ember/component/template-only';
import { formatRelativeTime } from 'ember-intl';

interface ExampleSignature {
  Args: {};
}

const Example: TOC<ExampleSignature> = <template>
  <div>
    Past: {{formatRelativeTime -1}}
  </div>

  <div>
    Now: {{formatRelativeTime 0}}
  </div>

  <div>
    Future: {{formatRelativeTime 3}}
  </div>
</template>;

export default Example;

Options ​

format ​

In app/ember-intl.{js,ts}, use the formatRelativeTime key to define the format's that you want to use in the app.

gts
import type { TOC } from '@ember/component/template-only';
import { formatRelativeTime } from 'ember-intl';

interface ExampleSignature {
  Args: {};
}

const Example: TOC<ExampleSignature> = <template>
  {{formatRelativeTime -1 format="compact"}}
</template>;

export default Example;
ts
import type { Formats } from 'ember-intl';

export const formats: Formats = {
  formatRelativeTime: {
    compact: {
      style: 'narrow',
    },
  },
};

locale ​

You can display the text in another locale (i.e. independently from the user's preferred locale). Pass the name of the locale to locale.

gts
import type { TOC } from '@ember/component/template-only';
import { formatRelativeTime } from 'ember-intl';

interface ExampleSignature {
  Args: {};
}

const Example: TOC<ExampleSignature> = <template>
  <div lang="en-us">
    {{formatRelativeTime -1 locale="en-us"}}
  </div>

  <div lang="de-de">
    {{formatRelativeTime -1 locale="de-de"}}
  </div>
</template>;

export default Example;

Intl ​

You can use named arguments to pass the options that Intl.RelativeTimeFormat supports. Some of these options are listed below.

  • numeric
  • style
  • unit
gts
import type { TOC } from '@ember/component/template-only';
import { formatRelativeTime } from 'ember-intl';

interface ExampleSignature {
  Args: {};
}

const Example: TOC<ExampleSignature> = <template>
  <div>
    Past: {{formatRelativeTime -1 unit="month"}}
  </div>

  <div>
    Now: {{formatRelativeTime 0 unit="day"}}
  </div>

  <div>
    Future: {{formatRelativeTime 3 unit="week"}}
  </div>
</template>;

export default Example;