Origami Frontend Components & Services

Demos: o-date

Declarative

Date will be set using the string in the datetime attribute and rendered as an absolute date as it was over a year ago.

<time data-o-component="o-date" class="o-date" datetime="2000-06-14T23:00:00.000Z">June 15, 2000</time>
    (dates far in the past are formatted as exact dates)
    <br>
    <time data-o-component="o-date" class="o-date"></time> (more recent dates
    are formatted as relative times)
    <br>
    <time data-o-component="o-date" class="o-date" data-o-date-format="today-or-yesterday-or-nothing"></time>
    (Using the o-date-format option)
    <br>
    <time data-o-component="o-date" class="o-date" data-o-date-format="time-ago-limit-4-hours"></time>
    (Using the o-date-format with time-ago-limit-4-hours)
    <br>
    <time data-o-component="o-date" class="o-date" data-o-date-format="time-ago-limit-24-hours"></time>
    (Using the o-date-format with time-ago-limit-24-hours)
    <br>
    <time data-o-component="o-date" class="o-date" data-o-date-format="h:mm a"></time>
    (Using the o-date-format with custom format string)
    <br>
    <time data-o-component="o-date" class="o-date" data-o-date-format="date-only">
      <!-- render date-only here, set on the parent "time" element -->
      <span data-o-date-printer> </span>
      <!-- render an abbreviated, relative time ago here -->
      <span data-o-date-printer data-o-date-format="time-ago-abbreviated">
      </span>
      <!-- render a custom format here, the absolute time -->
      <span data-o-date-printer data-o-date-format="h:mm"> </span>
    </time>
    (Using multiple o-date-format elements)
Status
active
Switch component view

GitHub Repository

Install o-date

If using the Build Service, add o-date@^5.0.0 to your script tag.

If using the npm package manager for a Manual Build, run npm install --save-peer "@financial-times/o-date@^5.0.0".

Help & Support

o-date is maintained directly by the Origami team. If you have any questions about o-date or Origami in general, we are happy to help. 😊

Slack: #origami-support
Email: origami.support@ft.com

Feedback / Issues

To report a bug or request features please create an issue on Github. For support or general feedback please get in touch 😊

Slack: #origami-support
Email: origami.support@ft.com