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'} %>