add date range to range page

assets/js/app.js

@@ -25,6 +25,7 @@ import 'phoenix_html'
 import { Socket } from 'phoenix'
 import { LiveSocket } from 'phoenix_live_view'
 import Date from './date'
+import DateRange from './date_range'
 import DateTime from './datetime'
 import ShotLogChart from './shot_log_chart'
 import SlimSelect from './slim_select'
@@ -33,7 +34,7 @@ import topbar from 'topbar'
 const csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute('content')
 const liveSocket = new LiveSocket('/live', Socket, {
   params: { _csrf_token: csrfToken },
-  hooks: { Date, DateTime, ShotLogChart, SlimSelect }
+  hooks: { Date, DateRange, DateTime, ShotLogChart, SlimSelect }
 })
 
 // Show progress bar on live navigation and form submits

assets/js/date_range.js

@@ -0,0 +1,28 @@
+import { easepick } from '@easepick/core'
+import { RangePlugin } from '@easepick/range-plugin'
+
+export default {
+  displayDateRange (el) {
+    // eslint-disable-next-line new-cap
+    el.easepick = new easepick.create({
+      element: el.firstElementChild,
+      css: [
+        'https://cdn.jsdelivr.net/npm/@easepick/core@1.2.1/dist/index.css',
+        'https://cdn.jsdelivr.net/npm/@easepick/range-plugin@1.2.1/dist/index.css'
+      ],
+      plugins: [RangePlugin],
+      RangePlugin: {
+        elementEnd: el.lastElementChild,
+        startDate: el.dataset.startDate,
+        endDate: el.dataset.endDate
+      },
+      setup (picker) {
+        picker.on('select', (e) => {
+          el.firstElementChild.dispatchEvent(new Event('input', { bubbles: true }))
+        })
+      }
+    })
+  },
+  mounted () { this.displayDateRange(this.el) },
+  updated () { this.displayDateRange(this.el) }
+}