feat: Add 'filterDate' prop function on Datepicker (#1587)

* feat: Implement a filter function for the Datepicker component

* feat: Update the Datepicker documentation

* fix: update filter function test to disable today's date

* feat: enhance Datepicker documentation and example to include 'Decades' in Views enum

* fix: update filter function test to disable tomorrow's date instead of today's

* fix: use "use client" directive in Datepicker filter component web doc

* fix: update filter function to compare dates by string representation for tomorrow's date

* chore: add changeset

* fix: minor version to patch

Author: raahed

.changeset/hip-pants-run.md

@@ -0,0 +1,5 @@
+---
+"flowbite-react": patch
+---
+
+feat(Datepicker): Implemented a filter function prop

apps/storybook/src/Datepicker.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryFn } from "@storybook/react";
 import type { DatepickerProps } from "flowbite-react";
-import { Datepicker, getFirstDateInRange, WeekStart } from "flowbite-react";
+import { Datepicker, getFirstDateInRange, Views, WeekStart } from "flowbite-react";
 import { useEffect, useState } from "react";
 
 export default {
@@ -147,3 +147,48 @@ EmptyDates.args = {
   theme: {},
   label: "No date selected",
 };
+
+export const FilterWeekdaysOnly = Template.bind({});
+FilterWeekdaysOnly.args = {
+  open: true,
+  autoHide: false,
+  showClearButton: true,
+  showTodayButton: true,
+  defaultValue: undefined,
+  value: undefined,
+  minDate: undefined,
+  maxDate: undefined,
+  filterDate: (date: Date, view: Views) => {
+    if (view === Views.Days) {
+      const day = date.getDay();
+      return day >= 1 && day <= 5;
+    }
+    return true;
+  },
+  language: "en",
+  weekStart: WeekStart.Sunday,
+  theme: {},
+  label: "Filter: Weekdays only",
+};
+
+export const FilterEvenDatesOnly = Template.bind({});
+FilterEvenDatesOnly.args = {
+  open: true,
+  autoHide: false,
+  showClearButton: true,
+  showTodayButton: true,
+  defaultValue: undefined,
+  value: undefined,
+  minDate: undefined,
+  maxDate: undefined,
+  filterDate: (date: Date, view: Views) => {
+    if (view === Views.Days) {
+      return date.getDate() % 2 === 0;
+    }
+    return true;
+  },
+  language: "en",
+  weekStart: WeekStart.Sunday,
+  theme: {},
+  label: "Filter: Even dates only",
+};

apps/web/content/docs/components/datepicker.mdx

@@ -27,6 +27,14 @@ The `labelTodayButton` and `labelClearButton` can also be used to update the tex
 
 <Example name="datepicker.localization" />
 
+## Filter dates
+
+You can use the `filterDate` prop to filter out specific dates from the datepicker component. This is useful if you want to disable certain dates or only allow selection of weekdays, for example.
+
+The `Views` enum can be used to determine the current view of the datepicker, such as `Days`, `Months`, `Years` or `Decades`.
+
+<Example name="datepicker.filter" />
+
 ## Limit the date
 
 By using the `minDate` and `maxDate` props you can limit the date range that the user can select.

apps/web/examples/datepicker/datepicker.filter.tsx

@@ -0,0 +1,45 @@
+"use client";
+
+import { Datepicker, Views } from "flowbite-react";
+import type { CodeData } from "~/components/code-demo";
+
+const code = `
+"use client";
+
+import { Datepicker, Views } from "flowbite-react";
+
+export function Component() {
+  const filterFn = (date: Date, view: Views) => {
+    if (view === Views.Days) {
+      const day = date.getDay();
+      return day >= 1 && day <= 5;
+    }
+    return true;
+  };
+
+  return <Datepicker filterDate={filterFn} />;
+}
+`;
+
+export function Component() {
+  const filterFn = (date: Date, view: Views) => {
+    if (view === Views.Days) {
+      const day = date.getDay();
+      return day >= 1 && day <= 5;
+    }
+    return true;
+  };
+
+  return <Datepicker filterDate={filterFn} />;
+}
+
+export const filter: CodeData = {
+  type: "single",
+  code: {
+    fileName: "index",
+    language: "tsx",
+    code,
+  },
+  githubSlug: "datepicker/datepicker.filter.tsx",
+  component: <Component />,
+};

apps/web/examples/datepicker/index.ts

@@ -1,6 +1,7 @@
 export { autoHide } from "./datepicker.autoHide";
 export { inline } from "./datepicker.inline";
 export { localization } from "./datepicker.localization";
+export { filter } from "./datepicker.filter";
 export { range } from "./datepicker.range";
 export { root } from "./datepicker.root";
 export { title } from "./datepicker.title";

packages/ui/src/components/Datepicker/Datepicker.test.tsx

@@ -4,7 +4,7 @@ import { useRef } from "react";
 import { describe, expect, it, vi } from "vitest";
 import type { DatepickerRef } from "./Datepicker";
 import { Datepicker } from "./Datepicker";
-import { getFormattedDate } from "./helpers";
+import { getFormattedDate, Views } from "./helpers";
 
 describe("Components / Datepicker", () => {
   it("should display today's date by default", () => {
@@ -185,6 +185,24 @@ describe("Components / Datepicker", () => {
     expect(outsideRange).toBeDisabled();
   });
 
+  it("the filter function should allow to disable a certain date", async () => {
+    const tomorrow = new Date();
+    tomorrow.setDate(new Date().getDate() + 1);
+
+    const filter = (date: Date, view: Views) => {
+      if (view === Views.Days) {
+        return date.toDateString() !== tomorrow.toDateString();
+      }
+      return true;
+    };
+
+    render(<Datepicker filterDate={filter} />);
+
+    await userEvent.click(screen.getByRole("textbox"));
+
+    expect(screen.getByText(tomorrow.getDate())).toBeDisabled();
+  });
+
   it("should focus the input when ref.current.focus is called", () => {
     const {
       result: { current: ref },

packages/ui/src/components/Datepicker/Datepicker.tsx

@@ -100,6 +100,7 @@ export interface DatepickerProps
   labelTodayButton?: string;
   minDate?: Date;
   maxDate?: Date;
+  filterDate?: (date: Date, view: Views) => boolean;
   language?: string;
   weekStart?: WeekStart;
   onChange?: (date: Date | null) => void;
@@ -127,6 +128,7 @@ export const Datepicker = forwardRef<DatepickerRef, DatepickerProps>((props, ref
     defaultValue,
     minDate,
     maxDate,
+    filterDate,
     language = "en",
     weekStart = WeekStart.Sunday,
     className,
@@ -277,6 +279,7 @@ export const Datepicker = forwardRef<DatepickerRef, DatepickerProps>((props, ref
         language,
         minDate,
         maxDate,
+        filterDate,
         weekStart,
         isOpen,
         setIsOpen,

packages/ui/src/components/Datepicker/DatepickerContext.tsx

@@ -10,6 +10,7 @@ export interface DatepickerContextValue {
   weekStart: WeekStart;
   minDate?: Date;
   maxDate?: Date;
+  filterDate?: (date: Date, view: Views) => boolean;
   isOpen?: boolean;
   setIsOpen: (isOpen: boolean) => void;
   view: Views;

packages/ui/src/components/Datepicker/Views/Days.tsx

@@ -2,7 +2,15 @@
 
 import { twMerge } from "../../../helpers/tailwind-merge";
 import { useDatePickerContext } from "../DatepickerContext";
-import { addDays, getFirstDayOfTheMonth, getFormattedDate, getWeekDays, isDateEqual, isDateInRange } from "../helpers";
+import {
+  addDays,
+  getFirstDayOfTheMonth,
+  getFormattedDate,
+  getWeekDays,
+  isDateEqual,
+  isDateInRange,
+  Views,
+} from "../helpers";
 
 export interface DatepickerViewsDaysTheme {
   header: {
@@ -25,6 +33,7 @@ export function DatepickerViewsDays() {
     weekStart,
     minDate,
     maxDate,
+    filterDate,
     viewDate,
     selectedDate,
     changeSelectedDate,
@@ -51,7 +60,8 @@ export function DatepickerViewsDays() {
           const day = getFormattedDate(language, currentDate, { day: "numeric" });
 
           const isSelected = selectedDate && isDateEqual(selectedDate, currentDate);
-          const isDisabled = !isDateInRange(currentDate, minDate, maxDate);
+          const isDisabled =
+            !isDateInRange(currentDate, minDate, maxDate) || (filterDate && !filterDate(currentDate, Views.Days));
 
           return (
             <button

packages/ui/src/components/Datepicker/Views/Decades.tsx

@@ -16,7 +16,16 @@ export interface DatepickerViewsDecadesTheme {
 }
 
 export function DatepickerViewsDecades() {
-  const { theme: rootTheme, viewDate, selectedDate, minDate, maxDate, setViewDate, setView } = useDatePickerContext();
+  const {
+    theme: rootTheme,
+    viewDate,
+    selectedDate,
+    minDate,
+    maxDate,
+    filterDate,
+    setViewDate,
+    setView,
+  } = useDatePickerContext();
 
   const theme = rootTheme.views.decades;
   const first = startOfYearPeriod(viewDate, 100);
@@ -31,7 +40,9 @@ export function DatepickerViewsDecades() {
         const lastDate = addYears(firstDate, 9);
 
         const isSelected = selectedDate && isDateInDecade(selectedDate, year);
-        const isDisabled = !isDateInRange(firstDate, minDate, maxDate) && !isDateInRange(lastDate, minDate, maxDate);
+        const isDisabled =
+          (!isDateInRange(firstDate, minDate, maxDate) && !isDateInRange(lastDate, minDate, maxDate)) ||
+          (filterDate && !filterDate(newDate, Views.Decades));
 
         return (
           <button