Open d6rkaiz opened 10 months ago
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?
I posted the above source to https://github.com/d6rkaiz/flowbite_datepicker
I'm encountering a similar issue, so I'm following this thread in case there are updates.
+1
I am trying to use datepicker in rails 7 with importmap, but it does not work when in dark mode.
/config/importmap.rb
/app/javascript/application.js
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
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.
The dialog that appears when the year and month are clicked is not correct.
What is the correct way to do this?