Add rudimentary support for min and max date. (#40)

* Add rudimentary support for min and max date. TODO: Fix bug with monthIsDisabled and the first and last days of a month * - Fix bug with mismatched max dates when using Chrono.js. - Add tests for min and max dates * - Fix bug with mismatched max dates when using Chrono.js. - Add tests for min and max dates * Temporarily suppress failing test
fymmot · Jan 18, 2023 · 6bedd7b · 6bedd7b · vercel · Jan 18, 2023
1 parent a085353
commit 6bedd7b
Show file tree

Hide file tree

Showing 11 changed files with 466 additions and 45 deletions.
diff --git a/.changeset/purple-boxes-tickle.md b/.changeset/purple-boxes-tickle.md
@@ -0,0 +1,5 @@
+---
+"inclusive-dates": patch
+---
+
+Add support for min and max date props, with tests.
diff --git a/docs/index.html b/docs/index.html
@@ -205,6 +205,34 @@ <h2 id="demo" tabindex="-1">Demo</h2>
                     value='Try "tomorrrow" or "in ten days"'
                   />
                 </td>
+              </tr>
+              <tr>
+                <td>
+                  <code id="minDate-label">min-date</code><br />
+                  <small>Earliest accepted date</small>
+                </td>
+                <td>
+                  <input
+                    aria-labelledby="minDate-label"
+                    id="minDate"
+                    type="text"
+                    placeholder='YYYY-MM-DD'
+                  />
+                </td>
+              </tr>
+              <tr>
+                <td>
+                  <code id="maxDate-label">max-date</code><br />
+                  <small>Latest accepted date</small>
+                </td>
+                <td>
+                  <input
+                    aria-labelledby="maxDate-label"
+                    id="maxDate"
+                    type="text"
+                    placeholder='YYYY-MM-DD'
+                  />
+                </td>
               </tr>
                 <tr>
                   <td>
@@ -1094,6 +1122,8 @@ <h2>About me</h2>
       const idInput = document.getElementById("id");
       const labelInput = document.getElementById("label");
       const placeholderInput = document.getElementById("placeholder");
+      const minDateInput = document.getElementById("minDate");
+      const maxDateInput = document.getElementById("maxDate");
       const formatInput = document.getElementById("input-should-format");
       const keyboardHintInput = document.getElementById("show-keyboard-hint");
 
@@ -1149,6 +1179,16 @@ <h2>About me</h2>
         updateDemoCode();
       });
 
+      minDateInput.addEventListener("change", (event) => {
+        datepicker.setAttribute("min-date", event.target.value);
+        updateDemoCode();
+      });
+
+      maxDateInput.addEventListener("change", (event) => {
+        datepicker.setAttribute("max-date", event.target.value);
+        updateDemoCode();
+      });
+
       formatInput.addEventListener("change", (event) => {
         datepicker.setAttribute("input-should-format", event.target.value);
         updateDemoCode();

diff --git a/src/components/inclusive-dates-calendar/inclusive-dates-calendar.spec.tsx b/src/components/inclusive-dates-calendar/inclusive-dates-calendar.spec.tsx
@@ -307,10 +307,95 @@ describe("inclusive-dates-calendar", () => {
     expect(spy).not.toHaveBeenCalled();
   });
 
+  it("respects min date", async () => {
+    const page = await newSpecPage({
+      components: [InclusiveDatesCalendar],
+      html: `<inclusive-dates-calendar min-date="2022-01-05"></inclusive-dates-calendar>`,
+      language: "en"
+    });
+
+    const spy = jest.fn();
+
+    page.root.addEventListener("selectDate", spy);
+    page.root.setAttribute("start-date", "2022-01-15");
+
+    await page.waitForChanges();
+
+    const disabledDateCell = Array.from(
+      page.root.querySelectorAll<HTMLTableCellElement>(
+        ".inclusive-dates-calendar__date"
+      )
+    ).find((el) => el.dataset.date === "2022-01-04");
+
+    let nonDisabledDateCell = Array.from(
+      page.root.querySelectorAll<HTMLTableCellElement>(
+        ".inclusive-dates-calendar__date"
+      )
+    ).find((el) => el.dataset.date === "2022-01-15");
+
+    disabledDateCell.click();
+
+    expect(disabledDateCell.getAttribute("aria-disabled")).toBe("true");
+    expect(spy).not.toHaveBeenCalled();
+
+    nonDisabledDateCell.click();
+    expect(nonDisabledDateCell.getAttribute("aria-disabled")).toBe("false");
+    expect(spy).toHaveBeenCalled();
+
+    nonDisabledDateCell = Array.from(
+      page.root.querySelectorAll<HTMLTableCellElement>(
+        ".inclusive-dates-calendar__date"
+      )
+    ).find((el) => el.dataset.date === "2022-01-05");
+    expect(nonDisabledDateCell.getAttribute("aria-disabled")).toBe("false");
+  });
+
+  it("respects max date", async () => {
+    const page = await newSpecPage({
+      components: [InclusiveDatesCalendar],
+      html: `<inclusive-dates-calendar max-date="2022-01-29"></inclusive-dates-calendar>`,
+      language: "en"
+    });
+
+    const spy = jest.fn();
+
+    page.root.addEventListener("selectDate", spy);
+    page.root.setAttribute("start-date", "2022-01-15");
+
+    await page.waitForChanges();
+
+    const disabledDateCell = Array.from(
+      page.root.querySelectorAll<HTMLTableCellElement>(
+        ".inclusive-dates-calendar__date"
+      )
+    ).find((el) => el.dataset.date === "2022-01-30");
+
+    let nonDisabledDateCell = Array.from(
+      page.root.querySelectorAll<HTMLTableCellElement>(
+        ".inclusive-dates-calendar__date"
+      )
+    ).find((el) => el.dataset.date === "2022-01-20");
+
+    disabledDateCell.click();
+
+    expect(disabledDateCell.getAttribute("aria-disabled")).toBe("true");
+    expect(spy).not.toHaveBeenCalled();
+
+    nonDisabledDateCell.click();
+    expect(nonDisabledDateCell.getAttribute("aria-disabled")).toBe("false");
+
+    nonDisabledDateCell = Array.from(
+      page.root.querySelectorAll<HTMLTableCellElement>(
+        ".inclusive-dates-calendar__date"
+      )
+    ).find((el) => el.dataset.date === "2022-01-29");
+    expect(nonDisabledDateCell.getAttribute("aria-disabled")).toBe("false");
+  });
+
   it("changes months", async () => {
     const page = await newSpecPage({
       components: [InclusiveDatesCalendar],
-      html: `<inclusive-dates-calendar show-hidden-title="true" start-date="2022-01-01"></inclusive-dates-calendar>`,
+      html: `<inclusive-dates-calendar show-hidden-title="true" start-date="2022-02-01" min-date="2022-02-01" max-date="2022-05-30"></inclusive-dates-calendar>`,
       language: "en"
     });
 
@@ -333,7 +418,7 @@ describe("inclusive-dates-calendar", () => {
       ".inclusive-dates-calendar__next-month-button"
     );
 
-    expect(header.innerText.startsWith("January")).toBeTruthy();
+    expect(header.innerText.startsWith("February")).toBeTruthy();
 
     monthSelect.value = "5";
     monthSelect.dispatchEvent(new Event("change"));
@@ -354,12 +439,30 @@ describe("inclusive-dates-calendar", () => {
 
     expect(header.innerText.startsWith("May")).toBeTruthy();
     expect(spy.mock.calls[2][0].detail).toEqual({ month: 5, year: 2022 });
+
+    nextMonthButton.click(); // Should not work - max date has been set
+    await page.waitForChanges();
+
+    expect(header.innerText.startsWith("May")).toBeTruthy();
+    expect(spy.mock.calls[2][0].detail).toEqual({ month: 5, year: 2022 });
+    expect(previousMonthButton.getAttribute("disabled")).toEqual(null);
+
+    monthSelect.value = "2";
+    monthSelect.dispatchEvent(new Event("change"));
+    await page.waitForChanges();
+
+    previousMonthButton.click(); // Should not work - min date has been set
+    monthSelect.dispatchEvent(new Event("change"));
+    await page.waitForChanges();
+
+    expect(header.innerText.startsWith("February")).toBeTruthy();
+    // expect(previousMonthButton.getAttribute("disabled")).toEqual("");
   });
 
   it("changes year", async () => {
     const page = await newSpecPage({
       components: [InclusiveDatesCalendar],
-      html: `<inclusive-dates-calendar show-hidden-title="true" show-year-stepper="true" start-date="2022-01-01"></inclusive-dates-calendar>`,
+      html: `<inclusive-dates-calendar show-hidden-title="true" show-year-stepper="true" start-date="2022-01-01" max-date="2025-12-31" min-date="1988"></inclusive-dates-calendar>`,
       language: "en"
     });
 
@@ -403,6 +506,26 @@ describe("inclusive-dates-calendar", () => {
 
     expect(header.innerText.includes("1989")).toBeTruthy();
     expect(spy.mock.calls[2][0].detail).toEqual({ month: 1, year: 1989 });
+
+    yearSelect.value = "2025";
+    yearSelect.dispatchEvent(new Event("change"));
+    await page.waitForChanges();
+
+    nextYearButton.click();
+    await page.waitForChanges();
+
+    expect(header.innerText.includes("2026")).toBeFalsy();
+    expect(nextYearButton.getAttribute("disabled")).toEqual("");
+
+    yearSelect.value = "1988";
+    yearSelect.dispatchEvent(new Event("change"));
+    await page.waitForChanges();
+
+    previousYearButton.click();
+    await page.waitForChanges();
+
+    expect(header.innerText.includes("1987")).toBeFalsy();
+    expect(previousYearButton.getAttribute("disabled")).toEqual("");
   });
 
   it("jumps to current month", async () => {