Format Date

Formats a date and time according to the user’s locale.

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

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

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

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

The date attribute determines the date/time to use when formatting. It must be a string that Date.parse() can interpret or a Date object set via JavaScript. If omitted, the current date/time will be assumed.

Examples

Date & time formatting

Formatting options are based on those found in the Intl.DateTimeFormat API. When formatting options are provided, the date/time will be formatted according to those values. When no formatting options are provided, a localized, numeric date will be displayed instead.

<!-- Human-readable date -->
<mo-format-date month="long" day="numeric" year="numeric"></mo-format-date><br />

<!-- Time -->
<mo-format-date hour="numeric" minute="numeric"></mo-format-date><br />

<!-- Weekday -->
<mo-format-date weekday="long"></mo-format-date><br />

<!-- Month -->
<mo-format-date month="long"></mo-format-date><br />

<!-- Year -->
<mo-format-date year="numeric"></mo-format-date><br />

<!-- No formatting options -->
<mo-format-date></mo-format-date>

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

const App = () => (
  <>
    {/* Human-readable date */}
    <MOFormatDate month="long" day="numeric" year="numeric" />
    <br />

    {/* Time */}
    <MOFormatDate hour="numeric" minute="numeric" />
    <br />

    {/* Weekday */}
    <MOFormatDate weekday="long" />
    <br />

    {/* Month */}
    <MOFormatDate month="long" />
    <br />

    {/* Year */}
    <MOFormatDate year="numeric" />
    <br />

    {/* No formatting options */}
    <MOFormatDate />
  </>
);

Hour formatting

By default, the browser will determine whether to use 12-hour or 24-hour time. To force one or the other, set the hour-format attribute to 12 or 24.

<mo-format-date hour="numeric" minute="numeric" hour-format="12"></mo-format-date><br />
<mo-format-date hour="numeric" minute="numeric" hour-format="24"></mo-format-date>

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

const App = () => (
  <>
    <MOFormatDate hour="numeric" minute="numeric" hour-format="12" />
    <br />
    <MOFormatDate hour="numeric" minute="numeric" hour-format="24" />
  </>
);

Localization

Use the lang attribute to set the date/time formatting locale.

English: <mo-format-date lang="en"></mo-format-date><br />
French: <mo-format-date lang="fr"></mo-format-date><br />
Russian: <mo-format-date lang="ru"></mo-format-date>

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

const App = () => (
  <>
    English: <MOFormatDate lang="en" />
    <br />
    French: <MOFormatDate lang="fr" />
    <br />
    Russian: <MOFormatDate 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.

import '@metsooutotec/modes-web-components/dist/components/format-date/format-date.js';

import MOFormatDate from '@metsooutotec/modes-web-components/dist/react/format-date/';

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

Properties

Learn more about attributes and properties.