From 988ec69f4f8e603ac58b44a56f5ccfee8795a82c Mon Sep 17 00:00:00 2001
From: Anthony Miller <antmiller202@gmail.com>
Date: Fri, 16 Aug 2019 04:13:10 -0400
Subject: [PATCH] Added a specific css class to excluded dates (#1849)

Prior to this change, dates that were passed in via the excludedDates array prop had no specific identifier class on the day elements in the datepicker - they used the same disabled class that was used for dates before the minDate/after the maxDate, which makes it difficult to apply custom styling directly to excluded dates
---
 src/date_utils.js       |  8 ++++++++
 src/day.jsx             |  4 ++++
 test/date_utils_test.js | 21 +++++++++++++++++++++
 3 files changed, 33 insertions(+)

diff --git a/src/date_utils.js b/src/date_utils.js
index dd680ec94..b100b4b2b 100644
--- a/src/date_utils.js
+++ b/src/date_utils.js
@@ -360,6 +360,14 @@ export function isDayDisabled(
   );
 }
 
+export function isDayExcluded(day, { excludeDates } = {}) {
+  return (
+    (excludeDates &&
+      excludeDates.some(excludeDate => isSameDay(day, excludeDate))) ||
+    false
+  );
+}
+
 export function isMonthDisabled(
   month,
   { minDate, maxDate, excludeDates, includeDates, filterDate } = {}
diff --git a/src/day.jsx b/src/day.jsx
index e93cc1a1a..a0fe2a2f3 100644
--- a/src/day.jsx
+++ b/src/day.jsx
@@ -8,6 +8,7 @@ import {
   newDate,
   isSameDay,
   isDayDisabled,
+  isDayExcluded,
   isDayInRange,
   isEqual,
   isBefore,
@@ -58,6 +59,8 @@ export default class Day extends React.Component {
 
   isDisabled = () => isDayDisabled(this.props.day, this.props);
 
+  isExcluded = () => isDayExcluded(this.props.day, this.props);
+
   getHighLightedClass = defaultClassName => {
     const { day, highlightDates } = this.props;
 
@@ -177,6 +180,7 @@ export default class Day extends React.Component {
       "react-datepicker__day--" + getDayOfWeekCode(this.props.day),
       {
         "react-datepicker__day--disabled": this.isDisabled(),
+        "react-datepicker__day--excluded": this.isExcluded(),
         "react-datepicker__day--selected": this.isSameDay(this.props.selected),
         "react-datepicker__day--keyboard-selected": this.isKeyboardSelected(),
         "react-datepicker__day--range-start": this.isRangeStart(),
diff --git a/test/date_utils_test.js b/test/date_utils_test.js
index 98ac26433..ee45268c8 100644
--- a/test/date_utils_test.js
+++ b/test/date_utils_test.js
@@ -7,6 +7,7 @@ import {
   isSameMonth,
   isSameYear,
   isDayDisabled,
+  isDayExcluded,
   isMonthDisabled,
   monthDisabledBefore,
   monthDisabledAfter,
@@ -197,6 +198,26 @@ describe("date_utils", function() {
     });
   });
 
+  describe("isDayExcluded", function() {
+    it("should not be excluded by default", () => {
+      const day = newDate();
+      expect(isDayExcluded(day)).to.be.false;
+    });
+
+    it("should be excluded if in excluded dates", () => {
+      const day = newDate();
+      expect(isDayExcluded(day, { excludeDates: [day] })).to.be.true;
+    });
+
+    it("should not be excluded if not in excluded dates", () => {
+      const day = newDate();
+      const excludedDay = newDate();
+      const currentMonth = excludedDay.getMonth();
+      excludedDay.setMonth(currentMonth === 11 ? 0 : currentMonth + 1);
+      expect(isDayExcluded(day, { excludeDates: [] }));
+    });
+  });
+
   describe("isMonthDisabled", function() {
     it("should be enabled by default", () => {
       const day = newDate();