When using importmap in rails7, datepicker does not work in dark mode.

[d6rkaiz]

I am trying to use datepicker in rails 7 with importmap, but it does not work when in dark mode.

/config/importmap.rb

# Pin npm packages by running ./bin/importmap

pin "application", preload: true
pin "@hotwired/turbo-rails", to: "turbo.min.js", preload: true
pin "@hotwired/stimulus", to: "stimulus.min.js", preload: true
pin "@hotwired/stimulus-loading", to: "stimulus-loading.js", preload: true
pin_all_from "app/javascript/controllers", under: "controllers"
pin "flowbite", to: "https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.0.0/flowbite.turbo.min.js"
pin "flowbite-datepicker", to: "https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.0.0/datepicker.turbo.min.js"

/app/javascript/application.js

// Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-rails
import "@hotwired/turbo-rails"
import "controllers"
import 'flowbite'
import 'flowbite-datepicker'

I am using the flowbit official date range picker as a sample, at which point it looks like this attachment.
cf: https://flowbite.com/docs/plugins/datepicker/#date-range-picker

Although it is not mentioned in the documentation for using importmap, the following is what it looks like after introducing flowbite.min.css.

/app/view/layoouts/application.html.haml

     = csp_meta_tag
     = stylesheet_link_tag "tailwind", "inter-font", "data-turbo-track": "reload"
     = stylesheet_link_tag "application", "data-turbo-track": "reload"
+    %link{:href => "https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.0.0/flowbite.min.css", :rel => "stylesheet"}/
     = javascript_importmap_tags
   %body.bg-white-200.dark:bg-slate-900.dark:text-white

It works, however, the behavior in dark mode is not right with this method.

If I change the loading position of the css, I get the following.

     = csp_meta_tag
+    %link{:href => "https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.0.0/flowbite.min.css", :rel => "stylesheet"}/
     = stylesheet_link_tag "tailwind", "inter-font", "data-turbo-track": "reload"
     = stylesheet_link_tag "application", "data-turbo-track": "reload"
     = javascript_importmap_tags
   %body.bg-white-200.dark:bg-slate-900.dark:text-white

The dialog that appears when the year and month are clicked is not correct.

What is the correct way to do this?

[d6rkaiz]

I posted the above source to https://github.com/d6rkaiz/flowbite_datepicker

[mickeymarse]

I'm encountering a similar issue, so I'm following this thread in case there are updates.

[itsyoshio]

+1

[samuelasselin]

Same issue using 2.5.2 using import map with rails 7.

[nooh43]

My setup is easy and simple, don't use a night mode so it's fine

/config/importmap.rb
pin "flowbite", to: "https://cdn.jsdelivr.net/npm/[email protected]/dist/flowbite.min.js"

and import 'flowbite' inside the application.js
+
a <%= yield :custom_css %> inside my layout just below the csp_meta_tag
with:
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/flowbite.min.css" rel="stylesheet" data-turbo-track="reload" in the page
That's pretty much it