relative-time-element icon indicating copy to clipboard operation
relative-time-element copied to clipboard

relative-time - Hard-coded format for non-relative output

Open nomego opened this issue 6 years ago • 1 comments

The element is pretty limited to English and the github date style right now. There should be a way to supply a strftime format for anything that is too old to be displayed in relative terms.

For example: https://github.com/github/time-elements/blob/77a086c07630ae2fefb1a763a2d5212b72de79d2/src/relative-time.js#L23

nomego avatar Aug 06 '19 12:08 nomego

If anyone's interested, here's what I'm doing to work around it. This will show a locale-formatted date instead of an "on..." string. You need to use <gf-relative-time> for this, but change it however you like.

import {RelativeTimeElement} from '@github/time-elements';

class GFRelativeTimeElement extends RelativeTimeElement {
  getLang() {
    return document.documentElement.getAttribute("lang")
  }

  // Don't show "on... ", show a localized date.
  // https://github.com/github/time-elements/issues/120
  getFormattedDate() {
    let v = super.getFormattedDate();
    if (v.startsWith('on ')) {
      return (new Date(this.getAttribute("datetime"))).toLocaleDateString(this.getLang());
    }
    return v;
  }
}

if (!window.customElements.get('gf-relative-time')) {
  window.GFRelativeTimeElement = GFRelativeTimeElement;
  window.customElements.define('gf-relative-time', GFRelativeTimeElement);
}

JasonBarnabe avatar Dec 06 '20 03:12 JasonBarnabe

In v3.2.0 you can customise the format in many ways; either use format= to apply a strftime compatible format, or use the options that align to the DateTimeFormat options. For more check out the new Readme,

keithamus avatar Nov 04 '22 12:11 keithamus