use daterangepicker js

app/assets/stylesheets/application.css

@@ -13,3 +13,4 @@
  *= require_tree .
  *= require_self
  */
+@import url("https://cdn.jsdelivr.net/gh/alumuko/vanilla-datetimerange-picker@latest/dist/vanilla-datetimerange-picker.css");

app/controllers/events_controller.rb

@@ -1,5 +1,14 @@
 class EventsController < ApplicationController
   def index
-    @events = Event.all.order(start_date: :desc)
+    if params[:start_date_between]
+      # params[:start_date_between] = "06/01/2023 - 06/30/2023"
+      starts = params[:start_date_between].split(" - ").first
+      starts_for_select = Date.strptime(starts, "%m/%d/%Y")
+      ends = params[:start_date_between].split(" - ").second
+      ends_for_select = Date.strptime(ends, "%m/%d/%Y")
+      @events = Event.where(start_date: starts_for_select..ends_for_select).order(start_date: :desc)
+    else
+      @events = Event.all.order(start_date: :desc)
+    end
   end
 end

app/javascript/application.js

@@ -1,3 +1,5 @@
 // Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-rails
 import "@hotwired/turbo-rails"
 import "controllers"
+import moment from "moment"
+window.moment = moment

app/javascript/controllers/daterangepicker_controller.js

@@ -0,0 +1,23 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Connects to data-controller="daterangepicker"
+export default class extends Controller {
+  connect() {
+    const ranges = {
+      Today: [moment(), moment()],
+      Yesterday: [moment().subtract('days', 1), moment().subtract('days', 1)],
+      'Last 7 Days': [moment().subtract('days', 6), moment()],
+      'Last 30 Days': [moment().subtract('days', 29), moment()],
+      'This Month': [moment().startOf('month'), moment().endOf('month')],
+      'Last Month': [moment().subtract('month', 1).startOf('month'), moment().subtract('month', 1).endOf('month')],
+      'Last 365 Days': [moment().subtract('days', 364), moment()],
+    }
+
+    new DateRangePicker(this.element, {
+      alwaysShowCalendars: true,
+      autoApply: true,
+      showWeekNumbers: true,
+      ranges: ranges
+    });
+  }
+}

app/views/events/index.html.erb

@@ -1,5 +1,21 @@
 <h1>Events</h1>
 
+<h3>HTML input field</h3>
+
+<script src="https://cdn.jsdelivr.net/gh/alumuko/vanilla-datetimerange-picker@latest/dist/vanilla-datetimerange-picker.js"></script>
+<input type="text" data-controller="daterangepicker" size="24" style="text-align:center">
+
+<h3>Search form</h3>
+
+<%= form_with url: events_path, method: :get do |form| %>
+  <%= form.text_field :start_date_between, value: params[:start_date_between], data: {controller: "daterangepicker"} %>
+  <%= form.submit "search" %>
+<% end %>
+
+<%= link_to "clear search", events_path if params[:start_date_between] %>
+
+<hr>
+
 <div id="events">
   <% @events.each do |event| %>
     <%= render event %>

config/importmap.rb

@@ -5,3 +5,4 @@
 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 "moment", to: "https://ga.jspm.io/npm:moment@2.29.4/moment.js"