Skip to content

[Datepicker] Month/Year button and static Year header text incorrectly share the same 'polite' class #1946

Description

@ijatinydv

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

  1. Install flowbite-svelte@latest
  2. Render a Datepicker and pass a background/border style to classes.polite to style the Month/Year title button.
  3. Observe that the Month/Year button on the main calendar view correctly gets the styles.
  4. Click the Month/Year button to open the month selection view.
  5. 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

  • I have searched existing issues and discussions
  • I have provided a minimal and runnable reproduction
  • I am using the latest version of Flowbite-Svelte

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions