Configuring flatpickr in Rails7 using simple_form

  Kiến thức lập trình

I’m trying to add to my app date-time picker using flatpickr and simple_form. I tried configure it according to https://github.com/zokioki/flatpickr-rails but with no efect. It seems that simple_form treats this only as datetime input which look like this:

calendar

I also tried by

npm i flatpickr --save

but still no effect.

My configuration now:

app/javascript/application.js

import flatpickr from "flatpickr"
require("flatpickr/dist/flatpickr.min.css")

document.addEventListener('turbolinks:load', () => {
  flatpickr(".datepicker", {
    altFormat: "F j, Y",
    dateFormat: "Y-m-d"
  })
});

app/assets/stylesheets/application.bootstrap.scss

@import 'bootstrap/scss/bootstrap';
@import 'bootstrap-icons/font/bootstrap-icons';
@import 'flatpickr/flatpickr';

and finally file new.html.erb

<%= simple_form_for @event do |f| %>
   <%= f.input :event_start, id: 'datepicker', 'data-turbolinks-track': 'reload' %>
   <%= f.submit class: "btn btn-primary btn-sm" %>
<% end %>

Also when I try to run rails assets:precompile I get:

Error: Can't find stylesheet to import.
  ╷
3 │ @import 'flatpickr/flatpickr';
  │         ^^^^^^^^^^^^^^^^^^^^^
  ╵
  app/assets/stylesheets/application.bootstrap.scss 3:9  root stylesheet

What is wrong with this configuration?

LEAVE A COMMENT