pat-display-time demo

1 - Basic examples

1.1 - Default

Code

  <time
      class="pat-display-time"
      datetime="2015-01-20T08:00Z">
      20 January 2015, 08:00
  </time>

Output

1.2 - Example setting the output format explicitly

Code

  <time
      class="pat-display-time"
      datetime="2015-01-20T08:00Z"
      data-pat-display-time="output-format: MMMM dddd Do YYYY, h:mm:ss a">
      20 January 2015, 08:00
  </time>

Output

1.3 - Output formatted as local

Code

  <time
      class="pat-display-time"
      datetime="2015-01-20T08:00Z"
      data-pat-display-time="output-format: L">
      20 January 2015, 08:00
  </time>

Output

2 - from-now (relative date) with date/time.

2.1 - Today

Code

<time
    class="pat-display-time"
    datetime="2022-07-21T10:00Z"
    lang="de"
    data-pat-display-time="from-now: true"
>
</time>

Output

2.2 - Tomorrow

Code

<time
    class="pat-display-time"
    datetime="2022-07-22T10:00Z"
    lang="de"
    data-pat-display-time="from-now: true"
>
</time>

Output

2.3 - Yesterday

Code

<time
    class="pat-display-time"
    datetime="2022-07-20T10:00Z"
    lang="de"
    data-pat-display-time="from-now: true"
>
</time>

Output

2.4 - Next week

Code

<time
    class="pat-display-time"
    datetime="2022-07-21T10:00Z"
    lang="de"
    data-pat-display-time="from-now: true"
>
</time>

Output

2.5 - Last week

Code

<time
    class="pat-display-time"
    datetime="2022-07-22T10:00Z"
    lang="de"
    data-pat-display-time="from-now: true"
>
</time>

Output

2.6 - 10 days in the future

Code

<time
    class="pat-display-time"
    datetime="2022-07-22T10:00Z"
    lang="de"
    data-pat-display-time="from-now: true"
>
</time>

Output

2.7 - 10 days in the past

Code

<time
    class="pat-display-time"
    datetime="2022-07-22T10:00Z"
    lang="de"
    data-pat-display-time="from-now: true"
>
</time>

Output

2.8 - Output formatted as 'from now' with no suffix, in English

Code

<time
    class="pat-display-time"
    datetime="2015-01-20T08:00Z"
    lang="en"
    data-pat-display-time="from-now: true; no-suffix: true">
</time>

Output

2.9 - Output formatted as 'from now' in English

Code

<time
    class="pat-display-time"
    datetime="2015-01-20T08:00Z"
    lang="en"
    data-pat-display-time="from-now: true"
>
</time>

Output

2.10 - Output formatted as 'from now' in Italian

Code

<time
    class="pat-display-time"
    datetime="2015-01-20T08:00Z"
    lang="it"
    data-pat-display-time="from-now: true"
>
</time>

Output

2.11 - Output formatted as 'from now' in Gaelic

Code

<time
    class="pat-display-time"
    datetime="2015-01-20T08:00Z"
    lang="ga"
    data-pat-display-time="from-now: true"
>
</time>

Output

2.12 - Output formatted as 'from now' in Dutch

Code

<time
    class="pat-display-time"
    datetime="2015-01-20T08:00Z"
    lang="nl"
    data-pat-display-time="from-now: true"
>
</time>

Output

3 - from-now (relative date) with date only dates.

3.1 - Today

Code

<time
    class="pat-display-time"
    datetime="2022-07-21"
    lang="de"
    data-pat-display-time="from-now: true"
>
</time>

Output

3.2 - Tomorrow

Code

<time
    class="pat-display-time"
    datetime="2022-07-22"
    lang="de"
    data-pat-display-time="from-now: true"
>
</time>

Output

3.3 - Yesterday

Code

<time
    class="pat-display-time"
    datetime="2022-07-20"
    lang="de"
    data-pat-display-time="from-now: true"
>
</time>

Output

3.4 - Next week

Code

<time
    class="pat-display-time"
    datetime="2022-07-25"
    lang="de"
    data-pat-display-time="from-now: true"
>
</time>

Output

3.5 - Last week

Code

<time
    class="pat-display-time"
    datetime="2022-07-17"
    lang="de"
    data-pat-display-time="from-now: true"
>
</time>

Output

3.6 - 10 days in the future

Code

<time
    class="pat-display-time"
    datetime="2022-07-31"
    lang="de"
    data-pat-display-time="from-now: true"
>
</time>

Output

3.7 - 10 days in the past

Code

<time
    class="pat-display-time"
    datetime="2022-07-11"
    lang="de"
    data-pat-display-time="from-now: true"
>
</time>

Output