Format Date

Formats a date/time using the specified locale and options.

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

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

import PFormatDate from 'pure-uikit/dist/react/format-date';

const App = () => <PFormatDate 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 -->
<p-format-date month="long" day="numeric" year="numeric"></p-format-date><br />

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

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

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

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

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

import PFormatDate from 'pure-uikit/dist/react/format-date';

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

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

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

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

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

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

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.

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

import PFormatDate from 'pure-uikit/dist/react/format-date';

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

Localization

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

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

import PFormatDate from 'pure-uikit/dist/react/format-date';

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

<script type="module" src="https://cdn.jsdelivr.net/npm/pure-uikit@1.3.13/cdn/components/format-date/format-date.js"></script>

import 'https://cdn.jsdelivr.net/npm/pure-uikit@1.3.13/cdn/components/format-date/format-date.js';

import 'pure-uikit/dist/components/format-date/format-date.js';

import PFormatDate from 'pure-uikit/dist/react/format-date';

Properties

Learn more about attributes and properties.