Excluded dates message

docs-site/src/components/Examples/index.js

@@ -28,6 +28,7 @@ import Locale from "../../examples/locale";
 import LocaleWithTime from "../../examples/localeWithTime";
 import LocaleWithoutGlobalVariable from "../../examples/localeWithoutGlobalVariable";
 import ExcludeDates from "../../examples/excludeDates";
+import ExcludedWithMessage from "../../examples/excludeDatesWithMessage";
 import ExcludeDateIntervals from "../../examples/excludeDateIntervals";
 import ExcludeDatesMonthPicker from "../../examples/excludeDatesMonthPicker";
 import HighlightDates from "../../examples/highlightDates";
@@ -271,6 +272,10 @@ export default class exampleComponents extends React.Component {
       title: "Exclude dates",
       component: ExcludeDates,
     },
+    {
+      title: "Exclude dates with message",
+      component: ExcludedWithMessage,
+    },
     {
       title: "Exclude date intervals",
       component: ExcludeDateIntervals,

docs-site/src/examples/excludeDatesWithMessage.js

@@ -0,0 +1,14 @@
+() => {
+  const [startDate, setStartDate] = useState(new Date());
+  return (
+    <DatePicker
+      selected={startDate}
+      onChange={(date) => setStartDate(date)}
+      excludeDates={[
+        { date: new Date(), message: "Today is excluded" },
+        { date: subDays(new Date(), 1), message: "This day is excluded" },
+      ]}
+      placeholderText="Select a date other than today or yesterday"
+    />
+  );
+};

src/date_utils.js

@@ -409,7 +409,9 @@ export function isDayDisabled(
   return (
     isOutOfBounds(day, { minDate, maxDate }) ||
     (excludeDates &&
-      excludeDates.some((excludeDate) => isSameDay(day, excludeDate))) ||
+      excludeDates.some((excludeDate) =>
+        isSameDay(day, excludeDate.date ? excludeDate.date : excludeDate),
+      )) ||
     (excludeDateIntervals &&
       excludeDateIntervals.some(({ start, end }) =>
         isWithinInterval(day, { start, end }),
@@ -436,7 +438,9 @@ export function isDayExcluded(
   }
   return (
     (excludeDates &&
-      excludeDates.some((excludeDate) => isSameDay(day, excludeDate))) ||
+      excludeDates.some((excludeDate) =>
+        isSameDay(day, excludeDate.date ? excludeDate.date : excludeDate),
+      )) ||
     false
   );
 }

src/day.jsx

@@ -56,6 +56,7 @@ export default class Day extends React.Component {
       PropTypes.shape({ locale: PropTypes.object }),
     ]),
     calendarStartDay: PropTypes.number,
+    excludeDates: PropTypes.arrayOf(PropTypes.instanceOf(Date)),
   };
 
   componentDidMount() {
@@ -326,14 +327,22 @@ export default class Day extends React.Component {
 
   // A function to return the holiday's name as title's content
   getTitle = () => {
-    const { day, holidays = new Map() } = this.props;
+    const { day, holidays = new Map(), excludeDates } = this.props;
     const compareDt = formatDate(day, "MM.dd.yyyy");
+    const titles = [];
     if (holidays.has(compareDt)) {
-      return holidays.get(compareDt).holidayNames.length > 0
-        ? holidays.get(compareDt).holidayNames.join(", ")
-        : "";
+      titles.push(...holidays.get(compareDt).holidayNames);
     }
-    return "";
+    if (this.isExcluded()) {
+      titles.push(
+        excludeDates
+          ?.filter((excludeDate) =>
+            isSameDay(excludeDate.date ? excludeDate.date : excludeDate, day),
+          )
+          .map((excludeDate) => excludeDate.message),
+      );
+    }
+    return titles.join(", ");
   };
 
   getTabIndex = (selected, preSelection) => {
@@ -423,7 +432,7 @@ export default class Day extends React.Component {
     >
       {this.renderDayContents()}
       {this.getTitle() !== "" && (
-        <span className="holiday-overlay">{this.getTitle()}</span>
+        <span className="overlay">{this.getTitle()}</span>
       )}
     </div>
   );

src/stylesheets/datepicker.scss

@@ -424,7 +424,7 @@
     background-color: $datepicker__holidays-color;
     color: #fff;
 
-    .holiday-overlay {
+    .overlay {
       position: absolute;
       bottom: 100%;
       left: 50%;
@@ -445,7 +445,7 @@
       background-color: darken($datepicker__holidays-color, 10%);
     }
 
-    &:hover .holiday-overlay {
+    &:hover .overlay {
       visibility: visible;
       opacity: 1;
     }
@@ -492,6 +492,23 @@
     &:hover {
       background-color: transparent;
     }
+
+    .overlay {
+      position: absolute;
+      bottom: 70%;
+      left: 50%;
+      transform: translateX(-50%);
+      background-color: #333;
+      color: #fff;
+      padding: 4px;
+      border-radius: 4px;
+      white-space: nowrap;
+      visibility: hidden;
+      opacity: 0;
+      transition:
+        visibility 0s,
+        opacity 0.3s ease-in-out;
+    }
   }
 }
 

test/exclude_dates.test.js

@@ -0,0 +1,49 @@
+import React from "react";
+import { render } from "@testing-library/react";
+import DatePicker from "../src/index.jsx";
+import { subDays } from "date-fns";
+
+describe("DatePicker", () => {
+  const excludeDates = [new Date(), subDays(new Date(), 1)];
+  const excludeDatesWithMessages = [
+    { date: subDays(new Date(), 1), message: "This day is excluded" },
+    { date: new Date(), message: "Today is excluded" },
+  ];
+
+  it("should disable dates specified in excludeDates props", () => {
+    const { container: datePicker } = render(
+      <DatePicker
+        open
+        excludeDates={excludeDates}
+        placeholderText="Select a date other than today or yesterday"
+      />,
+    );
+
+    const disabledTimeItems = datePicker.querySelectorAll(
+      ".react-datepicker__day--excluded",
+    );
+    expect(disabledTimeItems.length).toBe(excludeDates.length);
+  });
+
+  it("should disable dates specified in excludeDates props and should show the reason", () => {
+    const { container: datePicker } = render(
+      <DatePicker
+        open
+        excludeDates={excludeDatesWithMessages}
+        placeholderText="Select a date other than today or yesterday"
+      />,
+    );
+
+    const disabledTimeItems = datePicker.querySelectorAll(
+      ".react-datepicker__day--excluded",
+    );
+
+    expect(disabledTimeItems.length).toBe(excludeDatesWithMessages.length);
+    expect(disabledTimeItems[0].getAttribute("title")).toBe(
+      "This day is excluded",
+    );
+    expect(disabledTimeItems[1].getAttribute("title")).toBe(
+      "Today is excluded",
+    );
+  });
+});