Description
What is happening?
In the Datepicker component, the classes.polite property is applied to BOTH the interactive "Month/Year" toggle button AND the static "Year" header text (which appears when you switch to the month/year selection view).
This makes it impossible to style the Month/Year button (e.g., adding a background, border, or hover effect) without accidentally applying those exact same interactive button styles to the static text header. To style the button independently, developers are forced to use fragile CSS child selectors (like [&>button:nth-child(2)]), which breaks maintainability.
What did I expect to happen instead?
There should be separate class properties for the interactive Month/Year button and the static header text. For example, exposing a classes.titleButton and classes.titleText so they can be styled independently.
Minimal Reproduction
<script>
import { Datepicker } from 'flowbite-svelte';
</script>
<Datepicker
classes={{
// Trying to make the button look like a real button:
polite: "px-2 py-1 bg-gray-100 border border-gray-300 rounded-md hover:bg-gray-200"
}}
/>
Steps to Reproduce
- Install flowbite-svelte@latest
- Render a Datepicker and pass a background/border style to
classes.polite to style the Month/Year title button.
- Observe that the Month/Year button on the main calendar view correctly gets the styles.
- Click the Month/Year button to open the month selection view.
- Observe that the static Year text header at the top of the month selection grid incorrectly receives the exact same button styling (border, background, hover states), which looks broken since it is not an interactive element.
Environment
System:
OS: Windows 11 10.0.26200
CPU: (8) x64 11th Gen Intel(R) Core(TM) i5-1155G7 @ 2.50GHz
Memory: 1.40 GB / 7.65 GB
Binaries:
Node: 24.14.1 - C:\nvm4w\nodejs\node.EXE
npm: 11.11.0 - C:\nvm4w\nodejs\npm.CMD
pnpm: 10.32.1 - C:\Users\HP\AppData\Roaming\npm\pnpm.CMD
Browsers:
Chrome: 147.0.7727.103
Edge: Chromium (140.0.3485.54)
Firefox: 149.0.2 - C:\Program Files\Mozilla Firefox\firefox.exe
Internet Explorer: 11.0.26100.8115
npmPackages:
flowbite: ^4.0.1 => 4.0.1
flowbite-svelte: ^1.33.1 => 1.33.1
svelte: 5.55.4 => 5.55.2
vite: 7.3.2 => 7.3.2
Relevant Logs / Console Output
Screenshots / GIF (optional)
No response
Additional Context (optional)
No response
Checklist
Description
What is happening?
In the Datepicker component, the
classes.politeproperty is applied to BOTH the interactive "Month/Year" toggle button AND the static "Year" header text (which appears when you switch to the month/year selection view).This makes it impossible to style the Month/Year button (e.g., adding a background, border, or hover effect) without accidentally applying those exact same interactive button styles to the static text header. To style the button independently, developers are forced to use fragile CSS child selectors (like
[&>button:nth-child(2)]), which breaks maintainability.What did I expect to happen instead?
There should be separate class properties for the interactive Month/Year button and the static header text. For example, exposing a
classes.titleButtonandclasses.titleTextso they can be styled independently.Minimal Reproduction
Steps to Reproduce
classes.politeto style the Month/Year title button.Environment
System: OS: Windows 11 10.0.26200 CPU: (8) x64 11th Gen Intel(R) Core(TM) i5-1155G7 @ 2.50GHz Memory: 1.40 GB / 7.65 GB Binaries: Node: 24.14.1 - C:\nvm4w\nodejs\node.EXE npm: 11.11.0 - C:\nvm4w\nodejs\npm.CMD pnpm: 10.32.1 - C:\Users\HP\AppData\Roaming\npm\pnpm.CMD Browsers: Chrome: 147.0.7727.103 Edge: Chromium (140.0.3485.54) Firefox: 149.0.2 - C:\Program Files\Mozilla Firefox\firefox.exe Internet Explorer: 11.0.26100.8115 npmPackages: flowbite: ^4.0.1 => 4.0.1 flowbite-svelte: ^1.33.1 => 1.33.1 svelte: 5.55.4 => 5.55.2 vite: 7.3.2 => 7.3.2Relevant Logs / Console Output
Screenshots / GIF (optional)
No response
Additional Context (optional)
No response
Checklist