Skip to content

feat(datepicker): add showOutsideDays prop and css fixes #1671

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Karan5656 wants to merge 4 commits into
base: main
Choose a base branch
from
Open

feat(datepicker): add showOutsideDays prop and css fixes #1671

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
d887d0d
feat(datepicker): add showOutsideDays prop and css fixes
Karan5656 Apr 14, 2026
833d25c
feat(datepicker): updated the docs
Karan5656 Apr 14, 2026
22413a6
feat(datepicker): updated the css for dark mode
Karan5656 Apr 14, 2026
feb3544
Create changeset
Karan5656 Apr 14, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions apps/storybook/src/Datepicker.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -86,6 +86,7 @@ ControlledDefaultEmpty.args = {
autoHide: true,
showClearButton: true,
showTodayButton: true,
showOutsideDays: true,
value: null,
minDate: undefined,
maxDate: undefined,
Expand All @@ -100,6 +101,7 @@ Default.args = {
autoHide: true,
showClearButton: true,
showTodayButton: true,
showOutsideDays: true,
value: undefined,
minDate: undefined,
maxDate: undefined,
Expand All @@ -113,6 +115,7 @@ NullDateValue.args = {
autoHide: true,
showClearButton: true,
showTodayButton: true,
showOutsideDays: true,
minDate: undefined,
maxDate: undefined,
language: "en",
Expand All @@ -125,6 +128,7 @@ DateValueSet.args = {
autoHide: true,
showClearButton: true,
showTodayButton: true,
showOutsideDays: true,
minDate: undefined,
maxDate: undefined,
language: "en",
Expand All @@ -138,6 +142,7 @@ EmptyDates.args = {
autoHide: true,
showClearButton: true,
showTodayButton: true,
showOutsideDays: true,
defaultValue: undefined,
value: undefined,
minDate: undefined,
Expand All @@ -154,6 +159,7 @@ FilterWeekdaysOnly.args = {
autoHide: false,
showClearButton: true,
showTodayButton: true,
showOutsideDays: true,
defaultValue: undefined,
value: undefined,
minDate: undefined,
Expand All @@ -177,6 +183,7 @@ FilterEvenDatesOnly.args = {
autoHide: false,
showClearButton: true,
showTodayButton: true,
showOutsideDays: true,
defaultValue: undefined,
value: undefined,
minDate: undefined,
Expand Down
6 changes: 6 additions & 0 deletions apps/web/content/docs/components/datepicker.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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).
Expand Down
25 changes: 25 additions & 0 deletions apps/web/examples/datepicker/datepicker.showOutsideDays.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 />,
};
1 change: 1 addition & 0 deletions apps/web/examples/datepicker/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";
5 changes: 4 additions & 1 deletion packages/ui/src/components/Datepicker/Datepicker.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -126,6 +127,7 @@ export const Datepicker = forwardRef<DatepickerRef, DatepickerProps>((props, ref
labelClearButton = "Clear",
showTodayButton = true,
labelTodayButton = "Today",
showOutsideDays = true,
defaultValue,
minDate,
maxDate,
Expand Down Expand Up @@ -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);
}
Expand Down Expand Up @@ -282,6 +284,7 @@ export const Datepicker = forwardRef<DatepickerRef, DatepickerProps>((props, ref
maxDate,
filterDate,
weekStart,
showOutsideDays,
isOpen,
setIsOpen,
view,
Expand Down
1 change: 1 addition & 0 deletions packages/ui/src/components/Datepicker/DatepickerContext.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
12 changes: 10 additions & 2 deletions packages/ui/src/components/Datepicker/Views/Days.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import {
isDateEqual,
isDateInRange,
isDateToday,
isMonthEqual,
Views,
} from "../helpers";

Expand All @@ -24,6 +25,8 @@ export interface DatepickerViewsDaysTheme {
base: string;
selected: string;
disabled: string;
outside: string;
hidden: string;
today: string;
};
};
Expand All @@ -35,6 +38,7 @@ export function DatepickerViewsDays() {
weekStart,
minDate,
maxDate,
showOutsideDays,
filterDate,
viewDate,
selectedDate,
Expand Down Expand Up @@ -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);
}}
Expand Down
4 changes: 3 additions & 1 deletion packages/ui/src/components/Datepicker/theme.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot Apr 14, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

Dark mode de-emphasis is currently overridden for disabled/outside days.

Because the base class has dark:text-white (Line 49), disabled/outside states stay too bright in dark mode. Add explicit dark:text-* overrides for those states.

🎨 Suggested fix 
-          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",
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
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",
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",
🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@packages/ui/src/components/Datepicker/theme.ts` around lines 51 - 53, The
disabled/outside/hidden state class strings in the Datepicker theme object still
inherit the base "dark:text-white" and stay too bright in dark mode; update the
object entries for the keys disabled, outside, and hidden to include explicit
dark-mode de-emphasis (e.g., add a "dark:text-gray-500" or similar muted dark
token) so those states override the base dark:text-white — modify the strings
for disabled, outside, and hidden in the theme.ts Datepicker theme object
accordingly.

today: "",
},
},
Expand Down
Loading