title: Rails, flatpickr in simple-form not working
body: <p>First let me explain the context real quick. I created this app where users can organize music jam sessions. So basically they have the possibility to create such events. They are prompted to enter a date and a range of hours during that day.
  In my database, a jam session has a start_date and an end_date that are both datetime format. This might contribute to making my life harder, since it would be more logical to have a date(y-m-d), and a start_time and end_time.
  Maybe a new migration to change that is the best solution, but let me ask if I can go around it the way it is now.</p>
  
  <p>So far, I managed to make it work (kind of) but not with flatpickr.</p>
  
  <p>Here is the code related to this issue:</p>
  
  <p>1/ In my app/javascript/packs/application.js I have this (the TimePicker is used on another page for a search, and it works fine by the way. Here I am trying to use datepicker):</p>
  
  <pre><code>import "bootstrap";
  import "../plugins/flatpickr";
  
  import flatpickr from "flatpickr";
  import rangePlugin from "flatpickr/dist/plugins/rangePlugin";
  import 'flatpickr/dist/flatpickr.min.css'
  
  import 'mapbox-gl/dist/mapbox-gl.css'; // &lt;-- you need to uncomment the stylesheet_pack_tag in the layout!
  import { initMapbox } from '../plugins/init_mapbox';
  
  flatpickr(".datepicker", {
    minDate: new Date,
    altInput: true,
  });
  
  flatpickr(".TimePicker", {
      // enableTime: true,
      minDate: new Date,
      altInput: true,
      plugins: [new rangePlugin({ input: ".timePicker-end"})]
    });
  
  initMapbox();
  
  </code></pre>
  
  <p>2/ The schema.rb file (only the part concerning the jam sessions table):</p>
  
  <pre><code>  create_table "jam_sessions", force: :cascade do |t|
      t.string "title"
      t.string "description"
      t.string "genre"
      t.datetime "starts_at"
      t.datetime "ends_at"
      t.string "location"
      t.bigint "user_id"
      t.datetime "created_at", null: false
      t.datetime "updated_at", null: false
      t.float "latitude"
      t.float "longitude"
      t.index ["user_id"], name: "index_jam_sessions_on_user_id"
    end
  </code></pre>
  
  <p>3/ The new file where the form is located:</p>
  
  <pre><code>&lt;% music_genre = ["Acapella", "Accoustic", "Blues", "Classical", "Country", "Electronic", "Folk", "Funk", "Heavy Metal", "Hip Hop", "Jazz", "Latin", "Other", "Pop", "Reggae", "Rock", "World"] %&gt;
  
  &lt;div class="container h-100"&gt;
    &lt;div class="row justify-content-center align-items-center mt-3"&gt;
      &lt;div class="col col-6"&gt;
  
        &lt;h2&gt;Create your own Jam Session&lt;/h2&gt;
  
        &lt;%= simple_form_for [@jam_session] do |f| %&gt;
        &lt;% f.error_notification %&gt;
        &lt;%= f.error_notification message: f.object.errors[:base].to_sentence if f.object.errors[:base].present? %&gt;
  
          &lt;div class="form-inputs"&gt;
            &lt;%= f.input :title %&gt;
            &lt;%= f.input :description %&gt;
            &lt;%= f.input :genre, collection: music_genre %&gt;
            &lt;div class="row justify-content-center align-items-center mt-3"&gt;
              &lt;%= f.input :starts_at, as: :string, required: true, input_html: {class: "datepicker"} %&gt;
              &lt;%= f.input :starts_at, as: :time, :minute_step =&gt; 15, required: true %&gt;
              &lt;%= f.input :ends_at, as: :time, :minute_step =&gt; 15, required: true %&gt;
            &lt;/div&gt;
            &lt;%= f.input :location %&gt;
          &lt;/div&gt;
  
          &lt;div class="d-flex justify-content-end"&gt;
            &lt;%= f.button :submit, "GO !", class: 'big-button block' %&gt;
          &lt;/div&gt;
        &lt;% end %&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>4/ The jam_sessions Controller</p>
  
  <pre><code>class JamSessionsController &lt; ApplicationController
    def index
      # @jam_sessions = JamSession.search_by_location(params[:query])
  
      @jam_sessions = JamSession.includes(:spots, :instruments)
      # @jam_sessions = @jam_sessions.where(instruments: { id: jam_session_params[:instrument_id] }) if jam_session_params[:instrument_id].present?
      @jam_sessions = @jam_sessions.where(instruments: { id: params["jam_session"]["instrument_id"] }) if params["jam_session"]["instrument_id"].present?
      @jam_sessions = @jam_sessions.where(genre: params["jam_session"]["genre"]) if params["jam_session"]["genre"].present?
      @jam_sessions = @jam_sessions.search_by_location(params["jam_session"]["location"]) if params["jam_session"]["location"].present?
  
  
      if params[:jam_session] &amp;&amp; params[:jam_session][:starts_at]
        x = params[:jam_session][:starts_at]
  
        @start_date = x&amp;.split("to")[0]&amp;.strip
        @end_date = x&amp;.split("to")[1]&amp;.strip
  
        @jam_sessions = @jam_sessions.where("starts_at &gt; ?", @start_date) if @start_date.present?
        @jam_sessions = @jam_sessions.where("starts_at &lt; ?", @end_date) if @end_date.present?
      end
  
      # -------- access input from user ---------
      # @location_input = params["jam_session"]["location"]
      # @starts_at_input = params["jam_session"]["starts_at"]
      # @ends_at_input = params["jam_session"]["ends_at"]
      # @instrument_input = Instrument.find(params["jam_session"]["instrument_id"]).name if params["jam_session"]["instrument_id"].present?
      geocode(@jam_sessions)
      # access id of instruments
      @session_instruments_id = Instrument.all
    end
  
    def show
      @jam_session = JamSession.find(params[:id])
      @markers = [{
        lat: @jam_session.latitude,
        lng: @jam_session.longitude,
        infoWindow: render_to_string(partial: "info_window", locals: { jam_session: @jam_session }),
        image_url: helpers.asset_url("custom_marker.png"),
      }]
      @messages = JamSession.includes(messages: :user).find(params[:id])
    end
  
    def new
      @jam_session = JamSession.new
    end
  
    def create
      @jam_session = JamSession.new(jam_session_params)
      @jam_session.user = current_user
      if @jam_session.save
        redirect_to jam_session_path(@jam_session)
      else
        render "new"
      end
    end
  
    private
  
    def geocode(jam_sessions)
      @jam_sessions = @jam_sessions.geocoded #returns jam_sessions with coordinates
  
      @markers = @jam_sessions.map do |jam_session|
        {
          lat: jam_session.latitude,
          lng: jam_session.longitude,
          infoWindow: render_to_string(partial: "info_window", locals: { jam_session: jam_session }),
          image_url: helpers.asset_url("custom_marker.png"),
        }
      end
  
  
    end
  
    def jam_session_params
      params.require(:jam_session).permit(:title, :description, :genre, :starts_at, :ends_at, :location, :instrument_id)
    end
  end
  </code></pre>
  
  <p>But it doesn't work. Visually it does, meaning that the calendar appears and it seems like the user enters the right date, but in the end, the date is ignored and instead the date of the day is recorded by default in the database.</p>
  
  <p>It works with this code in simple-form, but it's ugly, and only if I put the date field after the hours fields, which is counter intuitive:</p>
  
  <pre><code>&lt;div class="row justify-content-center align-items-center mt-3"&gt;
    &lt;%= f.input :starts_at, as: :time, :minute_step =&gt; 15, required: true %&gt;
    &lt;%= f.input :ends_at, as: :time, :minute_step =&gt; 15, required: true %&gt;
    &lt;%= f.input :starts_at, as: :date, required: true %&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Any idea how I could make this work with flatipckr.</p>
  
  <p>Here are a couple if picks of the 2 versions of the form.</p>
  
  <p>With the datepicker (NOT WORKING):
  <a href="https://i.stack.imgur.com/Qyb93.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Qyb93.png" alt="datepicker not working"></a></p>
  
  <p>Just simple-form (WORKING but ugly):
  <a href="https://i.stack.imgur.com/EWMJ5.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/EWMJ5.png" alt="enter image description here"></a></p>
  
  <p>HERE ARE THE LOGS WHEN I CREATE A JAM SESSION. The first part (before the ^[[B^[[B is when the new page is loaded, where the form is located. After that are the logs once the form is submitted. To be clear, the start date I entered was 28th but it recorded today's date buy defautl)</p>
  
  <pre><code>Started GET "/jam_sessions/new" for ::1 at 2020-04-08 09:54:14 +0200
  Processing by JamSessionsController#new as HTML
    User Load (0.3ms)  SELECT  "users".* FROM "users" WHERE "users"."id" = $1 ORDER BY "users"."id" ASC LIMIT $2  [["id", 1], ["LIMIT", 1]]
    ↳ /home/olivier/.rbenv/versions/2.6.5/lib/ruby/gems/2.6.0/gems/activerecord-5.2.4.1/lib/active_record/log_subscriber.rb:98
    Rendering jam_sessions/new.html.erb within layouts/application
    Rendered jam_sessions/new.html.erb within layouts/application (41.1ms)
    ActiveStorage::Attachment Load (0.3ms)  SELECT  "active_storage_attachments".* FROM "active_storage_attachments" WHERE "active_storage_attachments"."record_id" = $1 AND "active_storage_attachments"."record_type" = $2 AND "active_storage_attachments"."name" = $3 LIMIT $4  [["record_id", 1], ["record_type", "User"], ["name", "photo"], ["LIMIT", 1]]
    ↳ app/views/shared/_navbar.html.erb:19
    ActiveStorage::Blob Load (0.4ms)  SELECT  "active_storage_blobs".* FROM "active_storage_blobs" WHERE "active_storage_blobs"."id" = $1 LIMIT $2  [["id", 1], ["LIMIT", 1]]
    ↳ app/views/shared/_navbar.html.erb:19
    Rendered shared/_navbar.html.erb (5.0ms)
  [Webpacker] Everything's up-to-date. Nothing to do
    Rendered shared/_footer.html.erb (0.3ms)
  Completed 200 OK in 67ms (Views: 63.4ms | ActiveRecord: 1.0ms)
  
  
  ^[[B^[[B
  Started POST "/jam_sessions" for ::1 at 2020-04-08 09:54:59 +0200
  Processing by JamSessionsController#create as HTML
    Parameters: {"utf8"=&gt;"✓", "authenticity_token"=&gt;"rA4WsBD2H9qDMp9/Jt/kxvJ6sJ+cHnRLByH0yFJlO/dm7EbNeuCtV3DK25pKVvb0RyaTWz2cUDhxWukL3HGMWQ==", "jam_session"=&gt;{"title"=&gt;"Let's play", "description"=&gt;"sdfkjqsdhflkjshdflkjqs", "genre"=&gt;"Country", "starts_at"=&gt;"2020-04-28", "starts_at(1i)"=&gt;"2020", "starts_at(2i)"=&gt;"4", "starts_at(3i)"=&gt;"8", "starts_at(4i)"=&gt;"07", "starts_at(5i)"=&gt;"00", "ends_at(1i)"=&gt;"2020", "ends_at(2i)"=&gt;"4", "ends_at(3i)"=&gt;"8", "ends_at(4i)"=&gt;"09", "ends_at(5i)"=&gt;"00", "location"=&gt;"Berlin"}, "commit"=&gt;"GO !"}
    User Load (0.4ms)  SELECT  "users".* FROM "users" WHERE "users"."id" = $1 ORDER BY "users"."id" ASC LIMIT $2  [["id", 1], ["LIMIT", 1]]
    ↳ /home/olivier/.rbenv/versions/2.6.5/lib/ruby/gems/2.6.0/gems/activerecord-5.2.4.1/lib/active_record/log_subscriber.rb:98
     (0.3ms)  BEGIN
    ↳ app/controllers/jam_sessions_controller.rb:50
    JamSession Create (0.8ms)  INSERT INTO "jam_sessions" ("title", "description", "genre", "starts_at", "ends_at", "location", "user_id", "created_at", "updated_at", "latitude", "longitude") VALUES ($1, $2, $3, $4, $5, $6, $7, $8, $9, $10, $11) RETURNING "id"  [["title", "Let's play"], ["description", "sdfkjqsdhflkjshdflkjqs"], ["genre", "Country"], ["starts_at", "2020-04-08 07:00:00"], ["ends_at", "2020-04-08 09:00:00"], ["location", "Berlin"], ["user_id", 1], ["created_at", "2020-04-08 07:54:59.230840"], ["updated_at", "2020-04-08 07:54:59.230840"], ["latitude", 52.5170365], ["longitude", 13.3888599]]
    ↳ app/controllers/jam_sessions_controller.rb:50
     (0.8ms)  COMMIT
    ↳ app/controllers/jam_sessions_controller.rb:50
  Redirected to http://localhost:3000/jam_sessions/22
  Completed 302 Found in 191ms (ActiveRecord: 2.3ms)
  
  
  Started GET "/jam_sessions/22" for ::1 at 2020-04-08 09:54:59 +0200
  Processing by JamSessionsController#show as HTML
    Parameters: {"id"=&gt;"22"}
    JamSession Load (0.5ms)  SELECT  "jam_sessions".* FROM "jam_sessions" WHERE "jam_sessions"."id" = $1 LIMIT $2  [["id", 22], ["LIMIT", 1]]
    ↳ app/controllers/jam_sessions_controller.rb:33
    Rendered jam_sessions/_info_window.html.erb (0.7ms)
    CACHE JamSession Load (0.0ms)  SELECT  "jam_sessions".* FROM "jam_sessions" WHERE "jam_sessions"."id" = $1 LIMIT $2  [["id", 22], ["LIMIT", 1]]
    ↳ app/controllers/jam_sessions_controller.rb:40
    Message Load (0.3ms)  SELECT "messages".* FROM "messages" WHERE "messages"."jam_session_id" = $1  [["jam_session_id", 22]]
    ↳ app/controllers/jam_sessions_controller.rb:40
    Rendering jam_sessions/show.html.erb within layouts/application
    User Load (0.3ms)  SELECT  "users".* FROM "users" WHERE "users"."id" = $1 LIMIT $2  [["id", 1], ["LIMIT", 1]]
    ↳ app/views/jam_sessions/show.html.erb:12
    User Load (0.2ms)  SELECT  "users".* FROM "users" WHERE "users"."id" = $1 ORDER BY "users"."id" ASC LIMIT $2  [["id", 1], ["LIMIT", 1]]
    ↳ app/views/jam_sessions/show.html.erb:12
    Spot Load (0.3ms)  SELECT "spots".* FROM "spots" WHERE "spots"."jam_session_id" = $1  [["jam_session_id", 22]]
    ↳ app/views/jam_sessions/show.html.erb:13
    User Exists (0.6ms)  SELECT  1 AS one FROM "users" INNER JOIN "participations" ON "users"."id" = "participations"."user_id" INNER JOIN "spots" ON "participations"."spot_id" = "spots"."id" WHERE "spots"."jam_session_id" = $1 AND "users"."id" = $2 LIMIT $3  [["jam_session_id", 22], ["id", 1], ["LIMIT", 1]]
    ↳ app/models/jam_session.rb:35
    Rendered shared/_chat-messages.html.erb (4.2ms)
    Spot Exists (0.4ms)  SELECT  1 AS one FROM "spots" LEFT OUTER JOIN "participations" ON "participations"."spot_id" = "spots"."id" WHERE "spots"."jam_session_id" = $1 AND "participations"."spot_id" IS NULL LIMIT $2  [["jam_session_id", 22], ["LIMIT", 1]]
    ↳ app/views/jam_sessions/show.html.erb:86
    CACHE User Exists (0.0ms)  SELECT  1 AS one FROM "users" INNER JOIN "participations" ON "users"."id" = "participations"."user_id" INNER JOIN "spots" ON "participations"."spot_id" = "spots"."id" WHERE "spots"."jam_session_id" = $1 AND "users"."id" = $2 LIMIT $3  [["jam_session_id", 22], ["id", 1], ["LIMIT", 1]]
    ↳ app/models/jam_session.rb:35
    SQL (0.5ms)  SELECT "spots"."id" AS t0_r0, "spots"."jam_session_id" AS t0_r1, "spots"."instrument_id" AS t0_r2, "spots"."created_at" AS t0_r3, "spots"."updated_at" AS t0_r4, "participations"."id" AS t1_r0, "participations"."spot_id" AS t1_r1, "participations"."user_id" AS t1_r2, "participations"."created_at" AS t1_r3, "participations"."updated_at" AS t1_r4 FROM "spots" LEFT OUTER JOIN "participations" ON "participations"."spot_id" = "spots"."id" WHERE "spots"."jam_session_id" = $1 AND "participations"."spot_id" IS NULL  [["jam_session_id", 22]]
    ↳ app/views/jam_sessions/show.html.erb:95
    Rendered jam_sessions/show.html.erb within layouts/application (14.5ms)
    ActiveStorage::Attachment Load (0.4ms)  SELECT  "active_storage_attachments".* FROM "active_storage_attachments" WHERE "active_storage_attachments"."record_id" = $1 AND "active_storage_attachments"."record_type" = $2 AND "active_storage_attachments"."name" = $3 LIMIT $4  [["record_id", 1], ["record_type", "User"], ["name", "photo"], ["LIMIT", 1]]
    ↳ app/views/shared/_navbar.html.erb:19
    ActiveStorage::Blob Load (0.3ms)  SELECT  "active_storage_blobs".* FROM "active_storage_blobs" WHERE "active_storage_blobs"."id" = $1 LIMIT $2  [["id", 1], ["LIMIT", 1]]
    ↳ app/views/shared/_navbar.html.erb:19
    Rendered shared/_navbar.html.erb (4.2ms)
  [Webpacker] Everything's up-to-date. Nothing to do
    Rendered shared/_footer.html.erb (0.3ms)
  Completed 200 OK in 41ms (Views: 32.3ms | ActiveRecord: 3.9ms)
  
  </code></pre>
  
  <p>Thank you!
  Olivier</p>