Skip to content

formatDate

Uses Intl.DateTimeFormat to format the date part of a Date object.

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

interface ExampleSignature {
  Args: {};
}

const today = new Date();

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

export default Example;

Options

format

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

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

interface ExampleSignature {
  Args: {};
}

const today = new Date();

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

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

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

For more information, see Services - intl (Part 2) - setFormats.

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 { formatDate } from 'ember-intl';

interface ExampleSignature {
  Args: {};
}

const today = new Date();

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

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

export default Example;

Intl

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

  • hour12
  • dateStyle
  • timeZone
  • weekday
gts
import type { TOC } from '@ember/component/template-only';
import { formatDate } from 'ember-intl';

interface ExampleSignature {
  Args: {};
}

const today = new Date();

const Example: TOC<ExampleSignature> = <template>
  {{formatDate today dateStyle="full" timeZone="America/New_York"}}
</template>;

export default Example;