spz-timeago

In the following example, we need to use data.agoText to get the converted time in the template.

<script id="timeago-locale" type="application/json">
  {
    "just_now": "Just now",
    "day_ago": "1 day ago",
    "days_ago": "{day} days ago",
    "month_ago": "1 month ago",
    "months_ago": "{month} months ago",
    "year_ago": "1 year ago",
    "years_ago": "{year} years ago"
  }
</script>

<spz-timeago layout="container" datetime="2022-11-26 16:22:15" locale="timeago-locale">
  <template>
    <div>
      ${data.agoText}
    </div>
  </template>
</spz-timeago>

In the following example, we need to use the format to get the utc time in the template.

<spz-timeago layout="container" datetime="2022-11-26 16:22:15" display-in="utc" format>
  <template>
    <div>
      ${data.month} ${data.day}, ${data.year} <!-- Nov 26, 2022 -->
    </div>
  </template>
</spz-timeago>

required

A datetime string, jusk like 2022-11-26 16:22:15, 2022-11-26 etc.

The locale attribute is required when the format attribute isn’t present.

An ID string is an ID of the script tag that stores a JSON object which contains keys in the following:

<script type="application/json">
  {
    "just_now": "...",
    "day_ago": "...",
    "days_ago": "...",
    "month_ago": "...",
    "months_ago": "...",
    "year_ago": "...",
    "years_ago": "..."
  }
</script>

If this attribute is present, the element will format the date to an object following:

{
  "day": "...",
  "dayPeriod": "...",
  "hour": "...",
  "hour12": "...",
  "minutes": "...",
  "month": "...",
  "seconds": "...",
  "year": "..."
}

The returned data format is utc or local format. If its value is utc, it will return the data in utc format. It must be used with the format attribute.

utc

{
    "year": "2022",
    "month": "Nov",
    "day": "26",
    "hour": "08",
    "hour12": 8,
    "minutes": "22",
    "seconds": "15",
    "dayPeriod": "am",
    "originData": { // original data
      // ...
    }
}

local

{
    "year": 2022,
    "month": "11",
    "day": "26",
    "hour": "16",
    "hour12": 4,
    "minutes": "22",
    "seconds": "15",
    "dayPeriod": "pm",
    "originData": {
      // ...
    }
}