feat(datepicker): add showOutsideDays prop and css fixes

.changeset/flat-spoons-double.md

@@ -0,0 +1,7 @@
+---
+"@/storybook": patch
+"@/web": patch
+"flowbite-react": patch
+---
+
+feat(datepicker): add showOutsideDays prop and css fixes

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,

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).

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 />,
+};

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";

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,

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;

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,20 +69,24 @@ 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(
                 theme.items.item.base,
                 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);
               }}

packages/ui/src/components/Datepicker/theme.ts

@@ -48,7 +48,10 @@ 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: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: "",
         },
       },