Custom format

examples/index.html

@@ -77,6 +77,13 @@ <h2>Future Date</h2>
     </relative-time>
   </p>
 
+  <p>
+    Relative time with custom format:
+    <relative-time datetime="2017-01-01T00:00:00.000Z" format="%Y-%m-%d">
+      Oops! This browser doesn't support Web Components.
+    </relative-time>
+  </p>
+
   <p>
     Time until:
     <time-until datetime="2024-12-31T00:00:00-05:00">

src/relative-time-element.ts

@@ -6,7 +6,7 @@ export default class RelativeTimeElement extends ExtendedTimeElement {
   getFormattedDate(): string | undefined {
     const date = this.date
     if (!date) return
-    return new RelativeTime(date, localeFromElement(this)).toString()
+    return new RelativeTime(date, localeFromElement(this)).toString(this.getAttribute('format') || undefined)
   }
 
   connectedCallback(): void {

src/relative-time.ts

@@ -9,18 +9,19 @@ export default class RelativeTime {
     this.locale = locale
   }
 
-  toString(): string {
+  toString(format?: string): string {
     const ago = this.timeElapsed()
     if (ago) {
       return ago
-    } else {
-      const ahead = this.timeAhead()
-      if (ahead) {
-        return ahead
-      } else {
-        return `on ${this.formatDate()}`
-      }
     }
+    const ahead = this.timeAhead()
+    if (ahead) {
+      return ahead
+    }
+    if (format) {
+      return this.formatDate(format)
+    }
+    return `on ${this.formatDate()}`
   }
 
   timeElapsed(): string | undefined | null {
@@ -167,10 +168,13 @@ export default class RelativeTime {
     }
   }
 
-  formatDate(): string {
-    let format = isDayFirst(this.locale) ? '%e %b' : '%b %e'
-    if (!isThisYear(this.date)) {
-      format += isYearSeparator() ? ', %Y' : ' %Y'
+  formatDate(defaultFormat?: string): string {
+    let format = defaultFormat
+    if (format == null) {
+      format = isDayFirst() ? '%e %b' : '%b %e'
+      if (!isThisYear(this.date)) {
+        format += isYearSeparator() ? ', %Y' : ' %Y'
+      }
     }
     return strftime(this.date, format)
   }

test/relative-time.js

@@ -162,6 +162,23 @@ suite('relative-time', function () {
     assert.equal(root.children[0].textContent, 'now')
   })
 
+  test('allows for use of custom formats', function () {
+    const time = document.createElement('relative-time')
+    time.textContent = 'Jun 30'
+    time.setAttribute('datetime', '2022-01-10T12:00:00')
+    time.setAttribute('format', '%Y')
+    assert.equal(time.textContent, '2022')
+  })
+
+  test('ignores blank formats', function () {
+    const time = document.createElement('relative-time')
+    time.textContent = 'Jun 30'
+    time.setAttribute('datetime', '2022-01-10T12:00:00')
+    time.setAttribute('lang', 'en-US')
+    time.setAttribute('format', '')
+    assert.equal(time.textContent, 'on Jan 10')
+  })
+
   const esLangSupport = (function () {
     try {
       return new Intl.RelativeTimeFormat('es').format(1, 'minute') === 'dentro de 1 minuto'