Timestamp

import '@rhds/elements/rh-timestamp/rh-timestamp.js';

<rh-timestamp date="Tue Aug 09 2006 14:57:00 GMT-0400"></rh-timestamp>

import { Timestamp } from "@rhds/elements/react/rh-timestamp/rh-timestamp.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <Timestamp date="Tue Aug 09 2006 14:57:00 GMT-0400" />
);

import '@rhds/elements/rh-timestamp/rh-timestamp.js';
document.getElementById('timestamp-custom-format').customFormat = {
  year: '2-digit',
  month: 'short',
  weekday: 'short',
  day: 'numeric',
  hour: 'numeric'
};

<rh-timestamp id="timestamp-custom-format" date="Sat Jan 01 2022 00:00:00 GMT-0500"></rh-timestamp>

import { Timestamp } from "@rhds/elements/react/rh-timestamp/rh-timestamp.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <Timestamp id="timestamp-custom-format" date="Sat Jan 01 2022 00:00:00 GMT-0500" />
);

import '@rhds/elements/rh-timestamp/rh-timestamp.js';

<rh-timestamp date="Tue Aug 09 2006 14:57:00 GMT-0400">Tue Aug 09 2006 14:57:00 GMT-0400</rh-timestamp>

import { Timestamp } from "@rhds/elements/react/rh-timestamp/rh-timestamp.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <Timestamp date="Tue Aug 09 2006 14:57:00 GMT-0400">Tue Aug 09 2006 14:57:00 GMT-0400</Timestamp>
);

import '@rhds/elements/rh-timestamp/rh-timestamp.js';

rh-timestamp {
  display: block;
}

<rh-timestamp date-format="full" time-format="full"></rh-timestamp>

<rh-timestamp date-format="full"></rh-timestamp>


<rh-timestamp time-format="full"></rh-timestamp>


<rh-timestamp date-format="medium" time-format="short" display-suffix="US Eastern"></rh-timestamp>

<rh-timestamp date-format="full" locale="es"></rh-timestamp>

import { Timestamp } from "@rhds/elements/react/rh-timestamp/rh-timestamp.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <Timestamp date-format="full" time-format="full" />
  <Timestamp date-format="full" />
  <Timestamp time-format="full" />
  <Timestamp date-format="medium" time-format="short" display-suffix="US Eastern" />
  <Timestamp date-format="full" locale="es" />
);

import '@rhds/elements/rh-timestamp/rh-timestamp.js';

rh-timestamp {
  display: block;
}

<rh-timestamp date="Tue Aug 09 2006 14:57:00 GMT-0400 (Eastern Daylight Time)" relative=""></rh-timestamp>
<rh-timestamp date="Tue Aug 09 2006 14:57:00 GMT-0400 (Eastern Daylight Time)" locale="es" relative=""></rh-timestamp>
<rh-timestamp date="Tue Aug 09 2022 14:57:00 GMT-0400 (Eastern Daylight Time)" relative=""></rh-timestamp>
<rh-timestamp date="Tue Aug 09 2022 14:57:00 GMT-0400 (Eastern Daylight Time)" locale="es" relative=""></rh-timestamp>
<rh-timestamp date="Tue Aug 09 2099 14:57:00 GMT-0400 (Eastern Daylight Time)" relative=""></rh-timestamp>
<rh-timestamp date="Tue Aug 09 2099 14:57:00 GMT-0400 (Eastern Daylight Time)" locale="es" relative=""></rh-timestamp>

import { Timestamp } from "@rhds/elements/react/rh-timestamp/rh-timestamp.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <Timestamp date="Tue Aug 09 2006 14:57:00 GMT-0400 (Eastern Daylight Time)" relative />
  <Timestamp date="Tue Aug 09 2006 14:57:00 GMT-0400 (Eastern Daylight Time)" locale="es" relative />
  <Timestamp date="Tue Aug 09 2022 14:57:00 GMT-0400 (Eastern Daylight Time)" relative />
  <Timestamp date="Tue Aug 09 2022 14:57:00 GMT-0400 (Eastern Daylight Time)" locale="es" relative />
  <Timestamp date="Tue Aug 09 2099 14:57:00 GMT-0400 (Eastern Daylight Time)" relative />
  <Timestamp date="Tue Aug 09 2099 14:57:00 GMT-0400 (Eastern Daylight Time)" locale="es" relative />
);

import '@rhds/elements/rh-tooltip/rh-tooltip.js';
import '@rhds/elements/rh-timestamp/rh-timestamp.js';

<section>
  <h2>Default tooltip</h2>
  <p>
    <rh-tooltip>
      <rh-timestamp></rh-timestamp>
      <rh-timestamp slot="content" utc=""></rh-timestamp>
    </rh-tooltip>
  </p>
  <p>
    <rh-tooltip>
      <rh-timestamp></rh-timestamp>
      <rh-timestamp slot="content" utc="" display-suffix="Coordinated Universal Time"></rh-timestamp>
    </rh-tooltip>
  </p>
</section>

<section>
  <h2>Custom tooltip</h2>
  <p>
    <rh-tooltip>
      <rh-timestamp date="Tue Aug 09 2022 14:57:00 GMT-0400 (Eastern Daylight Time)"></rh-timestamp>
      <span slot="content">Last updated on <rh-timestamp date="Tue Aug 09 2022 14:57:00 GMT-0400 (Eastern Daylight Time)" date-format="long" time-format="short" utc=""></rh-timestamp></span>
    </rh-tooltip>
  </p>
  <p>
    <rh-tooltip>
      Halloween
      <rh-timestamp slot="content" date="Mon Oct 31 2022 00:00:00 GMT-0400 (Eastern Daylight Time)" date-format="medium"></rh-timestamp>
    </rh-tooltip>
  </p>
</section>

<section>
  <h2>Relative with tooltip</h2>
  <p>
    <rh-tooltip>
      <rh-timestamp date="Tue Aug 09 2022 14:57:00 GMT-0400 (Eastern Daylight Time)" relative=""></rh-timestamp>
      <rh-timestamp slot="content" date="Tue Aug 09 2022 14:57:00 GMT-0400 (Eastern Daylight Time)"></rh-timestamp>
    </rh-tooltip>
  </p>
  <p>
    <rh-tooltip>
      <rh-timestamp date="Aug 09 2024 14:57:00 GMT-0400 (Eastern Daylight Time)" relative=""></rh-timestamp>
      <rh-timestamp slot="content" date="Aug 09 2024 14:57:00 GMT-0400 (Eastern Daylight Time)"></rh-timestamp>
    </rh-tooltip>
  </p>
</section>

import { Timestamp } from "@rhds/elements/react/rh-timestamp/rh-timestamp.js";
import { Tooltip } from "@rhds/elements/react/rh-tooltip/rh-tooltip.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <section>
    <h2>Default tooltip</h2>
    <p>
      <Tooltip>
        <Timestamp />
        <Timestamp slot="content" utc />
      </Tooltip>
    </p>
    <p>
      <Tooltip>
        <Timestamp />
        <Timestamp slot="content" utc display-suffix="Coordinated Universal Time" />
      </Tooltip>
    </p>
  </section>
  <section>
    <h2>Custom tooltip</h2>
    <p>
      <Tooltip>
        <Timestamp date="Tue Aug 09 2022 14:57:00 GMT-0400 (Eastern Daylight Time)" />
        <span slot="content">
Last updated on
<Timestamp date="Tue Aug 09 2022 14:57:00 GMT-0400 (Eastern Daylight Time)" date-format="long" time-format="short" utc />
        </span>
      </Tooltip>
    </p>
    <p>
      <Tooltip>
        Halloween
        <Timestamp slot="content" date="Mon Oct 31 2022 00:00:00 GMT-0400 (Eastern Daylight Time)" date-format="medium" />
      </Tooltip>
    </p>
  </section>
  <section>
    <h2>Relative with tooltip</h2>
    <p>
      <Tooltip>
        <Timestamp date="Tue Aug 09 2022 14:57:00 GMT-0400 (Eastern Daylight Time)" relative />
        <Timestamp slot="content" date="Tue Aug 09 2022 14:57:00 GMT-0400 (Eastern Daylight Time)" />
      </Tooltip>
    </p>
    <p>
      <Tooltip>
        <Timestamp date="Aug 09 2024 14:57:00 GMT-0400 (Eastern Daylight Time)" relative />
        <Timestamp slot="content" date="Aug 09 2024 14:57:00 GMT-0400 (Eastern Daylight Time)" />
      </Tooltip>
    </p>
  </section>
);