{{format-date-range}}

Uses Intl.DateTimeFormat to format a date range.

app/components/example.gts

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

interface ExampleSignature {
  Args: {};
}

const today = new Date();
const yesterday = new Date(today.valueOf() - 24 * 60 * 60 * 1000);

const Example: TOC<ExampleSignature> = <template>
  {{formatDateRange yesterday today}}
</template>;

export default Example;

options.format

In app/ember-intl.{js,ts}, you can use the formatDateRange key to define the formats that you want to reuse for the helper. Pass the name of your format to format.

app/components/example.gts

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

interface ExampleSignature {
  Args: {};
}

const today = new Date();
const yesterday = new Date(today.valueOf() - 24 * 60 * 60 * 1000);

const Example: TOC<ExampleSignature> = <template>
  {{formatDateRange yesterday today format="user-friendly"}}
</template>;

export default Example;

app/ember-intl.ts

import type { Formats } from 'ember-intl';

export const formats: Formats = {
  formatDateRange: {
    'user-friendly': {
      day: 'numeric',
      month: 'short',
    },
  },
};

options.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.

app/components/example.gts

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

interface ExampleSignature {
  Args: {};
}

const today = new Date();
const yesterday = new Date(today.valueOf() - 24 * 60 * 60 * 1000);

const Example: TOC<ExampleSignature> = <template>
  <div lang="en-us">
    {{formatDateRange yesterday today locale="en-us"}}
  </div>

  <div lang="de-de">
    {{formatDateRange yesterday today locale="de-de"}}
  </div>
</template>;

export default Example;

Additional options

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

• dateStyle
• day
• month
• timeZone

app/components/example.gts

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

interface ExampleSignature {
  Args: {};
}

const today = new Date();
const yesterday = new Date(today.valueOf() - 24 * 60 * 60 * 1000);

const Example: TOC<ExampleSignature> = <template>
  {{formatDateRange yesterday today day="numeric" month="short"}}
</template>;

export default Example;