From d887d0d750205fff3c80264a95cf51c8050fec21 Mon Sep 17 00:00:00 2001
From: Karan Zala <k.zala5656@gmail.com>
Date: Tue, 14 Apr 2026 14:06:26 +0530
Subject: [PATCH 1/4] feat(datepicker): add showOutsideDays prop and css fixes

---
 apps/storybook/src/Datepicker.stories.tsx            |  7 +++++++
 packages/ui/src/components/Datepicker/Datepicker.tsx |  5 ++++-
 .../src/components/Datepicker/DatepickerContext.tsx  |  1 +
 packages/ui/src/components/Datepicker/Views/Days.tsx | 12 ++++++++++--
 packages/ui/src/components/Datepicker/theme.ts       |  4 +++-
 5 files changed, 25 insertions(+), 4 deletions(-)

diff --git a/apps/storybook/src/Datepicker.stories.tsx b/apps/storybook/src/Datepicker.stories.tsx
index 231e7f0cd..0345e4460 100644
--- a/apps/storybook/src/Datepicker.stories.tsx
+++ b/apps/storybook/src/Datepicker.stories.tsx
@@ -86,6 +86,7 @@ ControlledDefaultEmpty.args = {
   autoHide: true,
   showClearButton: true,
   showTodayButton: true,
+  showOutsideDays: true,
   value: null,
   minDate: undefined,
   maxDate: undefined,
@@ -100,6 +101,7 @@ Default.args = {
   autoHide: true,
   showClearButton: true,
   showTodayButton: true,
+  showOutsideDays: true,
   value: undefined,
   minDate: undefined,
   maxDate: undefined,
@@ -113,6 +115,7 @@ NullDateValue.args = {
   autoHide: true,
   showClearButton: true,
   showTodayButton: true,
+  showOutsideDays: true,
   minDate: undefined,
   maxDate: undefined,
   language: "en",
@@ -125,6 +128,7 @@ DateValueSet.args = {
   autoHide: true,
   showClearButton: true,
   showTodayButton: true,
+  showOutsideDays: true,
   minDate: undefined,
   maxDate: undefined,
   language: "en",
@@ -138,6 +142,7 @@ EmptyDates.args = {
   autoHide: true,
   showClearButton: true,
   showTodayButton: true,
+  showOutsideDays: true,
   defaultValue: undefined,
   value: undefined,
   minDate: undefined,
@@ -154,6 +159,7 @@ FilterWeekdaysOnly.args = {
   autoHide: false,
   showClearButton: true,
   showTodayButton: true,
+  showOutsideDays: true,
   defaultValue: undefined,
   value: undefined,
   minDate: undefined,
@@ -177,6 +183,7 @@ FilterEvenDatesOnly.args = {
   autoHide: false,
   showClearButton: true,
   showTodayButton: true,
+  showOutsideDays: true,
   defaultValue: undefined,
   value: undefined,
   minDate: undefined,
diff --git a/packages/ui/src/components/Datepicker/Datepicker.tsx b/packages/ui/src/components/Datepicker/Datepicker.tsx
index 7267a3e0f..2c7a7abfe 100644
--- a/packages/ui/src/components/Datepicker/Datepicker.tsx
+++ b/packages/ui/src/components/Datepicker/Datepicker.tsx
@@ -99,6 +99,7 @@ export interface DatepickerProps
   labelClearButton?: string;
   showTodayButton?: boolean;
   labelTodayButton?: string;
+  showOutsideDays?: boolean;
   minDate?: Date;
   maxDate?: Date;
   filterDate?: (date: Date, view: Views) => boolean;
@@ -126,6 +127,7 @@ export const Datepicker = forwardRef<DatepickerRef, DatepickerProps>((props, ref
     labelClearButton = "Clear",
     showTodayButton = true,
     labelTodayButton = "Today",
+    showOutsideDays = true,
     defaultValue,
     minDate,
     maxDate,
@@ -158,7 +160,7 @@ export const Datepicker = forwardRef<DatepickerRef, DatepickerProps>((props, ref
   // Triggers when user select the date
   function changeSelectedDate(date: Date | null, useAutohide: boolean) {
     setSelectedDate(date);
-
+    if (date) setViewDate(date);
     if ((date === null || date) && onChange) {
       onChange(date);
     }
@@ -282,6 +284,7 @@ export const Datepicker = forwardRef<DatepickerRef, DatepickerProps>((props, ref
         maxDate,
         filterDate,
         weekStart,
+        showOutsideDays,
         isOpen,
         setIsOpen,
         view,
diff --git a/packages/ui/src/components/Datepicker/DatepickerContext.tsx b/packages/ui/src/components/Datepicker/DatepickerContext.tsx
index d00a88ed9..51b3d352f 100644
--- a/packages/ui/src/components/Datepicker/DatepickerContext.tsx
+++ b/packages/ui/src/components/Datepicker/DatepickerContext.tsx
@@ -8,6 +8,7 @@ export interface DatepickerContextValue {
   theme: DatepickerTheme;
   language: string;
   weekStart: WeekStart;
+  showOutsideDays: boolean;
   minDate?: Date;
   maxDate?: Date;
   filterDate?: (date: Date, view: Views) => boolean;
diff --git a/packages/ui/src/components/Datepicker/Views/Days.tsx b/packages/ui/src/components/Datepicker/Views/Days.tsx
index f91a0843f..5d056da69 100644
--- a/packages/ui/src/components/Datepicker/Views/Days.tsx
+++ b/packages/ui/src/components/Datepicker/Views/Days.tsx
@@ -10,6 +10,7 @@ import {
   isDateEqual,
   isDateInRange,
   isDateToday,
+  isMonthEqual,
   Views,
 } from "../helpers";
 
@@ -24,6 +25,8 @@ export interface DatepickerViewsDaysTheme {
       base: string;
       selected: string;
       disabled: string;
+      outside: string;
+      hidden: string;
       today: string;
     };
   };
@@ -35,6 +38,7 @@ export function DatepickerViewsDays() {
     weekStart,
     minDate,
     maxDate,
+    showOutsideDays,
     filterDate,
     viewDate,
     selectedDate,
@@ -65,10 +69,12 @@ export function DatepickerViewsDays() {
           const isDisabled =
             !isDateInRange(currentDate, minDate, maxDate) || (filterDate && !filterDate(currentDate, Views.Days));
           const isToday = isDateToday(currentDate);
+          const isOutsideDay = !isMonthEqual(currentDate, viewDate);
+          const isHidden = isOutsideDay && !showOutsideDays;
 
           return (
             <button
-              disabled={isDisabled}
+              disabled={isDisabled || isHidden}
               key={index}
               type="button"
               className={twMerge(
@@ -76,9 +82,11 @@ export function DatepickerViewsDays() {
                 isToday && theme.items.item.today,
                 isSelected && theme.items.item.selected,
                 isDisabled && theme.items.item.disabled,
+                isOutsideDay && !isSelected && !isDisabled && showOutsideDays && theme.items.item.outside,
+                isHidden && theme.items.item.hidden,
               )}
               onClick={() => {
-                if (isDisabled) return;
+                if (isDisabled || isHidden) return;
 
                 changeSelectedDate(currentDate, true);
               }}
diff --git a/packages/ui/src/components/Datepicker/theme.ts b/packages/ui/src/components/Datepicker/theme.ts
index e3394257b..6b9595fd9 100644
--- a/packages/ui/src/components/Datepicker/theme.ts
+++ b/packages/ui/src/components/Datepicker/theme.ts
@@ -48,7 +48,9 @@ export const datePickerTheme = createTheme<DatepickerTheme>({
         item: {
           base: "block flex-1 cursor-pointer rounded-lg border-0 text-center text-sm font-semibold leading-9 text-gray-900 hover:bg-gray-100 dark:text-white dark:hover:bg-gray-600",
           selected: "bg-primary-700 text-white hover:bg-primary-600",
-          disabled: "text-gray-500",
+          disabled: "cursor-not-allowed text-gray-300 hover:bg-transparent dark:hover:bg-transparent",
+          outside: "text-gray-300",
+          hidden: "cursor-default opacity-0 hover:bg-transparent dark:hover:bg-transparent",
           today: "",
         },
       },

From 833d25c5b7f07a3dc9d7779b0d48692da0a0ab71 Mon Sep 17 00:00:00 2001
From: Karan Zala <k.zala5656@gmail.com>
Date: Tue, 14 Apr 2026 14:32:11 +0530
Subject: [PATCH 2/4] feat(datepicker): updated the docs

---
 .../content/docs/components/datepicker.mdx    |  6 +++++
 .../datepicker/datepicker.showOutsideDays.tsx | 25 +++++++++++++++++++
 apps/web/examples/datepicker/index.ts         |  1 +
 3 files changed, 32 insertions(+)
 create mode 100644 apps/web/examples/datepicker/datepicker.showOutsideDays.tsx

diff --git a/apps/web/content/docs/components/datepicker.mdx b/apps/web/content/docs/components/datepicker.mdx
index 7e3e31701..ff34e1fb4 100644
--- a/apps/web/content/docs/components/datepicker.mdx
+++ b/apps/web/content/docs/components/datepicker.mdx
@@ -83,6 +83,12 @@ Use `<Datepicker value={}` to create a controlled `<Datepicker />`. Pass `null`
 
 <Example name="datepicker.value" />
 
+## Outside days
+
+Use the `showOutsideDays` prop to show or hide the days falling into other months.
+
+<Example name="datepicker.showOutsideDays" />
+
 ## Theme
 
 To learn more about how to customize the appearance of components, please see the [Theme docs](/docs/customize/theme).
diff --git a/apps/web/examples/datepicker/datepicker.showOutsideDays.tsx b/apps/web/examples/datepicker/datepicker.showOutsideDays.tsx
new file mode 100644
index 000000000..74dd23b04
--- /dev/null
+++ b/apps/web/examples/datepicker/datepicker.showOutsideDays.tsx
@@ -0,0 +1,25 @@
+import { Datepicker } from "flowbite-react";
+import type { CodeData } from "~/components/code-demo";
+
+const code = `
+import { Datepicker } from "flowbite-react";
+
+export function Component() {
+  return <Datepicker showOutsideDays={false} />;
+}
+`;
+
+export function Component() {
+  return <Datepicker showOutsideDays={false} />;
+}
+
+export const showOutsideDays: CodeData = {
+  type: "single",
+  code: {
+    fileName: "index",
+    language: "tsx",
+    code,
+  },
+  githubSlug: "datepicker/datepicker.showOutsideDays.tsx",
+  component: <Component />,
+};
diff --git a/apps/web/examples/datepicker/index.ts b/apps/web/examples/datepicker/index.ts
index f477842dc..fe4ee2999 100644
--- a/apps/web/examples/datepicker/index.ts
+++ b/apps/web/examples/datepicker/index.ts
@@ -6,4 +6,5 @@ export { range } from "./datepicker.range";
 export { root } from "./datepicker.root";
 export { title } from "./datepicker.title";
 export { value } from "./datepicker.value";
+export { showOutsideDays } from "./datepicker.showOutsideDays";
 export { weekStart } from "./datepicker.weekStart";

From 22413a6b740238f613f226b963e1984677aaafe4 Mon Sep 17 00:00:00 2001
From: Karan Zala <k.zala5656@gmail.com>
Date: Tue, 14 Apr 2026 15:22:45 +0530
Subject: [PATCH 3/4] feat(datepicker): updated the css for dark mode

---
 packages/ui/src/components/Datepicker/theme.ts | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/ui/src/components/Datepicker/theme.ts b/packages/ui/src/components/Datepicker/theme.ts
index 6b9595fd9..9c0ff0fbd 100644
--- a/packages/ui/src/components/Datepicker/theme.ts
+++ b/packages/ui/src/components/Datepicker/theme.ts
@@ -48,8 +48,9 @@ export const datePickerTheme = createTheme<DatepickerTheme>({
         item: {
           base: "block flex-1 cursor-pointer rounded-lg border-0 text-center text-sm font-semibold leading-9 text-gray-900 hover:bg-gray-100 dark:text-white dark:hover:bg-gray-600",
           selected: "bg-primary-700 text-white hover:bg-primary-600",
-          disabled: "cursor-not-allowed text-gray-300 hover:bg-transparent dark:hover:bg-transparent",
-          outside: "text-gray-300",
+          disabled:
+            "cursor-not-allowed text-gray-300 hover:bg-transparent dark:text-gray-500 dark:hover:bg-transparent",
+          outside: "text-gray-300 dark:text-gray-500",
           hidden: "cursor-default opacity-0 hover:bg-transparent dark:hover:bg-transparent",
           today: "",
         },

From feb354463d47f4f9d57ee2f9cfc10bbeab8753c1 Mon Sep 17 00:00:00 2001
From: Karansinh Zala <76040803+Karan5656@users.noreply.github.com>
Date: Tue, 14 Apr 2026 15:46:48 +0530
Subject: [PATCH 4/4] Create changeset

---
 .changeset/flat-spoons-double.md | 7 +++++++
 1 file changed, 7 insertions(+)
 create mode 100644 .changeset/flat-spoons-double.md

diff --git a/.changeset/flat-spoons-double.md b/.changeset/flat-spoons-double.md
new file mode 100644
index 000000000..a242ecc20
--- /dev/null
+++ b/.changeset/flat-spoons-double.md
@@ -0,0 +1,7 @@
+---
+"@/storybook": patch
+"@/web": patch
+"flowbite-react": patch
+---
+
+feat(datepicker): add showOutsideDays prop and css fixes