Support out-of-month days style #1647
Description
- I have searched the Issues to see if this bug has already been reported
- I have tested the latest version
Summary
Feature suggestion: Style out-of-month days in flowbite-react Datepicker
Out-of-month days (the leading/trailing days from the previous/next month shown to fill the month grid) currently render with the same visual emphasis as in-month days in the flowbite-react Datepicker. This makes the calendar harder to scan and reduces parity with Flowbite’s HTML datepicker styling.
Desired behavior
When the Datepicker renders a given month view (e.g., “January 2026”), any day cell that belongs to December 2025 or February 2026—but is displayed in the January grid—should be visually de-emphasized.
Proposed default behavior:
- Apply reduced opacity (e.g.,
opacity-40) and/or muted text styling (e.g.,text-gray-500) to out-of-month day cells. - Keep out-of-month days interactive (clickable) unless they are disabled by min/max date constraints.
- Ensure selected styling overrides out-of-month styling so selection remains clearly visible.
Suggested API improvement
Add a theme token for out-of-month days
Extend the existing theme structure with an outside (or outOfMonth) style key for day items:
views: {
days: {
items: {
item: {
base: "...",
selected: "...",
disabled: "...",
outside: "opacity-40 text-gray-500", // custom style
},
},
},
}Current Behaviour
Expected Behaviour
Context
Why this matters
- Improved readability: Users can immediately distinguish which days belong to the current month vs. adjacent months.
- Better ecosystem consistency: Aligns the
flowbite-reactDatepicker with the visual semantics users expect from Flowbite’s datepicker patterns. - Avoids brittle workarounds: Without a supported hook, consumers resort to DOM querying / MutationObservers to post-process day elements, which is fragile against internal markup changes.