maint(pat display time): Document preference of setting the language as lang attribute.

Author: thet

src/pat/display-time/display-time.test.js

@@ -59,6 +59,23 @@ describe("pat-display-time tests", () => {
         expect(el.textContent).toBe("April Donnerstag 22. 2021, 4:00:00");
     });
 
+    it("Example setting the output format explicitly in German using the lang attribute", async () => {
+        document.body.innerHTML = `
+          <time
+              class="pat-display-time"
+              datetime="2021-04-22T23:00Z"
+              lang="de"
+              data-pat-display-time="output-format: MMMM dddd Do YYYY, h:mm:ss">
+          </time>
+        `;
+        const el = document.querySelector(".pat-display-time");
+
+        Pattern.init(el);
+        await utils.timeout(1); // wait a tick for async to settle.
+
+        expect(el.textContent).toBe("April Donnerstag 22. 2021, 4:00:00");
+    });
+
     it("Example setting the output format in German due containment in German container", async () => {
         document.body.innerHTML = `
           <section lang="de">
@@ -139,6 +156,23 @@ describe("pat-display-time tests", () => {
         expect(el.textContent.indexOf("Jahre") >= 0).toBe(true);
     });
 
+    it("Output formatted as 'from now' with no suffix in german using the lang attribute", async () => {
+        document.body.innerHTML = `
+          <time
+              class="pat-display-time"
+              datetime="2000-04-22T10:00Z"
+              lang="de"
+              data-pat-display-time="from-now: true; no-suffix: true">
+          </time>
+        `;
+        const el = document.querySelector(".pat-display-time");
+
+        Pattern.init(el);
+        await utils.timeout(1); // wait a tick for async to settle.
+
+        expect(el.textContent.indexOf("Jahre") >= 0).toBe(true);
+    });
+
     it("Formating empty datetime clears the display.", async () => {
         document.body.innerHTML = `
           <time class="pat-display-time">

src/pat/display-time/index.html

@@ -162,7 +162,9 @@ <h3>Code</h3>
 &lt;time
     class="pat-display-time"
     datetime="2015-01-20T08:00Z"
-    data-pat-display-time="from-now: true; no-suffix: true; locale: de"&gt;
+    lang="de"
+    data-pat-display-time="from-now: true; no-suffix: true"
+&gt;
     20 January 2015, 08:00
 &lt;/time&gt;
 </pre>
@@ -173,7 +175,8 @@ <h3>Output</h3>
                 <time
                     class="pat-display-time"
                     datetime="2015-01-20T08:00Z"
-                    data-pat-display-time="from-now: true; no-suffix: true; locale: de"
+                    lang="de"
+                    data-pat-display-time="from-now: true; no-suffix: true"
                 >
                     20 January 2015, 08:00
                 </time>