feat(pat-date-picker): Add placeholder support for styled behavior.

/cc @cornae
This fixes the following two issues:

Fixes: #837
Fixes: quaive/ploneintranet.prototype#1289

Author: thet

src/pat/date-picker/date-picker.js

@@ -95,7 +95,7 @@ export default Base.extend({
                 );
             }
 
-            let display_el_pat;
+            let pat_display_time;
             if (this.options.outputFormat) {
                 const PatDisplayTime = (await import("../display-time/display-time")).default; // prettier-ignore
                 const display_time_config = { format: this.format };
@@ -105,23 +105,39 @@ export default Base.extend({
                 if (this.options.locale) {
                     display_time_config.locale = this.options.locale;
                 }
-                display_el_pat = new PatDisplayTime(display_el, display_time_config);
-            } else {
+                pat_display_time = new PatDisplayTime(display_el, display_time_config);
+            } else if (this.el.value) {
                 display_el.textContent = el.value;
             }
 
-            $(display_el).on("init.display-time.patterns", () =>
-                this.add_clear_button(display_el)
-            );
+            // Add the additional elements "clear button" and placeholder to
+            // the `<time>` element.
+            const _add_additional = () => {
+                this.add_clear_button(display_el);
+                if (!this.el.value && this.el.placeholder) {
+                    display_el.innerHTML = `<span class="placeholder">${this.el.placeholder}</span>`;
+                }
+            };
+            if (pat_display_time) {
+                // Add the additional elements after display time has
+                // eventually cleared the contents or done any other changes.
+                $(display_el).on("init.display-time.patterns", () => {
+                    _add_additional();
+                });
+            } else {
+                // If no `pat-display-time` was used, add immediately.
+                _add_additional();
+            }
 
             this.el.addEventListener("change", () => {
                 display_el.setAttribute("datetime", this.el.value);
-                if (display_el_pat) {
-                    display_el_pat.format();
+                if (pat_display_time && this.el.value) {
+                    pat_display_time.format();
                 } else {
+                    //} else if (this.el.value) {
                     display_el.textContent = this.el.value;
                 }
-                this.add_clear_button(display_el);
+                _add_additional();
             });
 
             if (disabled) {

src/pat/date-picker/date-picker.test.js

@@ -37,6 +37,31 @@ const mock_fetch_i18n = () =>
             }),
     });
 
+const select_date = (el, date) => {
+    // Attention! Just select today.
+    // Scrolling calendar pages forward and backwards is not supported yet.
+    el.click();
+
+    const day = date.getDate().toString();
+    const month = date.getMonth().toString(); // remember, month-count starts from 0
+    const year = date.getFullYear().toString();
+
+    const cur_year = document.querySelector('.pika-lendar .pika-select-year option[selected="selected"]'); // prettier-ignore
+    expect(cur_year.textContent).toBe(year);
+
+    const cur_month = document.querySelector('.pika-lendar .pika-select-month option[selected="selected"]'); // prettier-ignore
+    expect(cur_month.value).toBe(month);
+
+    const cur_day = document.querySelector(".pika-lendar td.is-today button"); // prettier-ignore
+    expect(cur_day.getAttribute("data-pika-day")).toBe(day);
+
+    const cur_wkday = document.querySelector(".pika-lendar th:first-child abbr"); // prettier-ignore
+    expect(cur_wkday.textContent).toBe("Sun");
+
+    // select current day.
+    cur_day.dispatchEvent(new Event("mousedown"));
+};
+
 describe("pat-date-picker", function () {
     afterEach(function () {
         document.body.innerHTML = "";
@@ -57,28 +82,10 @@ describe("pat-date-picker", function () {
         expect(el.getAttribute("type")).toBe("date");
         expect(el.style.display).toBe("none");
 
-        display_el.click();
-
         const date = new Date();
-        const day = date.getDate().toString();
-        const month = date.getMonth().toString(); // remember, month-count starts from 0
-        const year = date.getFullYear().toString();
         const isodate = utils.localized_isodate(date);
+        select_date(display_el, date);
 
-        const cur_year = document.querySelector('.pika-lendar .pika-select-year option[selected="selected"]'); // prettier-ignore
-        expect(cur_year.textContent).toBe(year);
-
-        const cur_month = document.querySelector('.pika-lendar .pika-select-month option[selected="selected"]'); // prettier-ignore
-        expect(cur_month.value).toBe(month);
-
-        const cur_day = document.querySelector(".pika-lendar td.is-today button"); // prettier-ignore
-        expect(cur_day.getAttribute("data-pika-day")).toBe(day);
-
-        const cur_wkday = document.querySelector(".pika-lendar th:first-child abbr"); // prettier-ignore
-        expect(cur_wkday.textContent).toBe("Sun");
-
-        // select current day.
-        cur_day.dispatchEvent(new Event("mousedown"));
         // <time> element should contains the current date in iso format
         expect(display_el.textContent).toBe(isodate);
         // input element contains iso date
@@ -618,4 +625,41 @@ describe("pat-date-picker", function () {
         // There should be a error message from pat-validation.
         expect(form.querySelectorAll("em.warning").length).toBe(1);
     });
+
+    it("15 - Placeholder support.", async () => {
+        document.body.innerHTML = `
+            <input
+                type="date"
+                class="pat-date-picker"
+                placeholder="Select a date"
+                />`;
+        const el = document.querySelector("input[type=date]");
+        new pattern(el);
+        await utils.timeout(1); // wait a tick for async to settle.
+
+        const display_el = document.querySelector("time");
+        expect(display_el).toBeTruthy();
+        expect(display_el.textContent).toBe("Select a date");
+        expect(el.value).toBe("");
+
+        const date = new Date();
+        const isodate = utils.localized_isodate(date);
+        select_date(display_el, date);
+
+        // <time> element should contains the current date in iso format
+        expect(display_el.textContent).toBe(isodate);
+        // input element contains iso date
+        expect(el.value).toBe(isodate);
+
+        // Clear button is availale
+        let clear_button = display_el.querySelector(".cancel-button");
+        expect(clear_button).toBeTruthy();
+
+        clear_button.click();
+
+        // <time> element should contain the placeholder again
+        expect(display_el.textContent).toBe("Select a date");
+        // input element should be empty
+        expect(el.value).toBe("");
+    });
 });

src/pat/date-picker/index.html

@@ -75,6 +75,14 @@
                 </label>
                 <br />
 
+                <label>Placeholder support.
+                    <input
+                        class="pat-date-picker"
+                        type="date"
+                        placeholder="YYYY-MM-DD"
+                    />
+                </label>
+                <br />
 
                 <label
                     >Show the week number.