I wanted to use the flatpickr datetime picker because the default date picker for Simple Form wasn't particularly useful.

Install the flatpickr module

yarn add flatpickr

Add the CSS to the application

Add the following line into app/views/layout/application.html.erb

<%= csp_meta_tag %>

<!-- add this line here -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">

<%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>

Create a stimulus controller for Flatpickr

rails g stimulus flatpickr

Update the Flatpickr controller

Modify app/javascript/controllers/flatpickr_controller.js

import { Controller } from "@hotwired/stimulus";
import flatpickr from "flatpickr";


// Connects to data-controller="flatpickr"
export default class extends Controller {
  connect() {

    flatpickr(".fp_date_time", {
      enableTime: true,
      dateFormat: "Y-m-d H:i",
    }
    );  

    flatpickr(".fp_date");  

  }
}

In this case, I specified two CSS classes. One has date and time, which I called fp_date_time, and the other is just time and called fp_time. For more configurations, check out the Flatpickr documentation.

Modify your form element

There are two things you have to do with the form in Rails.

Associate the controller with the form itself.

<%= simple_form_for(@event, data: {
  controller: "flatpickr"
  }) do |f| %>

Flatpickr works as a string field. For it to work in Simple Form, I had to override the field to be a string and that leverage the class that I specified

<%= f.input :start_time, as: :string, input_html: {class: 'fp_date_time'} %>