update deps

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) }
+}

assets/package-lock.json

@@ -6,6 +6,7 @@
     "": {
       "license": "MIT",
       "dependencies": {
+        "@easepick/bundle": "^1.2.1",
         "@fortawesome/fontawesome-free": "^6.7.2",
         "chart.js": "^4.4.7",
         "chartjs-adapter-date-fns": "^3.0.0",
@@ -2766,6 +2767,102 @@
         "node": ">=14.17.0"
       }
     },
+    "node_modules/@easepick/amp-plugin": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@easepick/amp-plugin/-/amp-plugin-1.2.1.tgz",
+      "integrity": "sha512-LbGd7RU+fiucxTqJnBpT5SwACX1BoEK4yi1joLqN50O57jpN0jQMMvDO/vp/F4Zr8MO6kwaamRmOXhqo/Vb4aw==",
+      "license": "GPL-2.0-or-later",
+      "dependencies": {
+        "@easepick/base-plugin": "^1.1.0"
+      }
+    },
+    "node_modules/@easepick/base-plugin": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@easepick/base-plugin/-/base-plugin-1.2.1.tgz",
+      "integrity": "sha512-aonBQaRyZwNH/gmPzSzZDVjQjgy/rxWd+TXnM0E3Nxkeu4yMbXV+GnWVQbBwTvJx74M7iSCHJowdmZ5T46B7Vg==",
+      "license": "GPL-2.0-or-later",
+      "dependencies": {
+        "@easepick/core": "^1.1.0"
+      }
+    },
+    "node_modules/@easepick/bundle": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@easepick/bundle/-/bundle-1.2.1.tgz",
+      "integrity": "sha512-M9DGu7rrIltbTEPuBfc8fTOdK1E2CjTIiSqXmVRcof/peDnDC7U7h3XaTx7nbB0gq4HUTUO8BKHrofPC0jPqSw==",
+      "license": "GPL-2.0-or-later",
+      "dependencies": {
+        "@easepick/amp-plugin": "^1.1.0",
+        "@easepick/base-plugin": "^1.1.0",
+        "@easepick/core": "^1.1.0",
+        "@easepick/datetime": "^1.1.0",
+        "@easepick/kbd-plugin": "^1.1.0",
+        "@easepick/lock-plugin": "^1.1.0",
+        "@easepick/preset-plugin": "^1.1.0",
+        "@easepick/range-plugin": "^1.1.0",
+        "@easepick/time-plugin": "^1.1.0"
+      }
+    },
+    "node_modules/@easepick/core": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@easepick/core/-/core-1.2.1.tgz",
+      "integrity": "sha512-V/blEia/ykAq+0mnQ9djOU5wvMZ+iffL5iuQrKLObpMOw38kL/qo4inH4pCbB3wm7sDjrJTuDKf+6+FrgdFGsw==",
+      "license": "GPL-2.0-or-later",
+      "dependencies": {
+        "@easepick/datetime": "^1.1.0"
+      }
+    },
+    "node_modules/@easepick/datetime": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@easepick/datetime/-/datetime-1.2.1.tgz",
+      "integrity": "sha512-KIUvWo/kEipwBqPTazjfUf6R7dKb2ztPizPoB/0ZMYz3HrWJptsLSZQma3R1nM/zkaexnk/e4L4nX+vDjwBtYA==",
+      "license": "GPL-2.0-or-later"
+    },
+    "node_modules/@easepick/kbd-plugin": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@easepick/kbd-plugin/-/kbd-plugin-1.2.1.tgz",
+      "integrity": "sha512-t/bEtKuvAbo9b9iw4J5h5DsGYEL4Wm2sLA2VzR2rvmMfJuo1extktgzw2eCy+w6Q/s4ObdKzhXLnjMvFeiJ8Xg==",
+      "license": "GPL-2.0-or-later",
+      "dependencies": {
+        "@easepick/base-plugin": "^1.1.0"
+      }
+    },
+    "node_modules/@easepick/lock-plugin": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@easepick/lock-plugin/-/lock-plugin-1.2.1.tgz",
+      "integrity": "sha512-6sJCdliMpnQtzL9dwznS9vYaQUy66VRKPZ+jFdVR1ohiNUVM6C7dSGdG3dPntVTywTy2Z9uU+yJOeWcVFDT61A==",
+      "license": "GPL-2.0-or-later",
+      "dependencies": {
+        "@easepick/base-plugin": "^1.1.0"
+      }
+    },
+    "node_modules/@easepick/preset-plugin": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@easepick/preset-plugin/-/preset-plugin-1.2.1.tgz",
+      "integrity": "sha512-VAnjyWpf39kXTR6DYbpCJIBeBhbOgRoNTqntpSb5uF9O398KuHUpIM4Ep1id3fTIlfnRrKxzp54rAFwvc48eCA==",
+      "license": "GPL-2.0-or-later",
+      "dependencies": {
+        "@easepick/base-plugin": "^1.1.0",
+        "@easepick/range-plugin": "^1.1.0"
+      }
+    },
+    "node_modules/@easepick/range-plugin": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@easepick/range-plugin/-/range-plugin-1.2.1.tgz",
+      "integrity": "sha512-yEHLUq32Kj0exLz4txxchALQVJUbwyXvnovfN7yxTrCJLpi6uMmPXcW4lyYig2P9+xM9JqF6JsNqOsi0+5GlHQ==",
+      "license": "GPL-2.0-or-later",
+      "dependencies": {
+        "@easepick/base-plugin": "^1.1.0"
+      }
+    },
+    "node_modules/@easepick/time-plugin": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@easepick/time-plugin/-/time-plugin-1.2.1.tgz",
+      "integrity": "sha512-mjynAAppLxlqiDSdHdkBEqi4A67CH17FqO3UH2n6mfAIKPZLQA7R8Y6jEkp+Fpl5tj0/HFqdrk82ceiYYnLFYw==",
+      "license": "GPL-2.0-or-later",
+      "dependencies": {
+        "@easepick/base-plugin": "^1.1.0"
+      }
+    },
     "node_modules/@eslint-community/eslint-utils": {
       "version": "4.4.0",
       "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz",

assets/package.json

@@ -13,6 +13,7 @@
     "test": "standard"
   },
   "dependencies": {
+    "@easepick/bundle": "^1.2.1",
     "@fortawesome/fontawesome-free": "^6.7.2",
     "chart.js": "^4.4.7",
     "chartjs-adapter-date-fns": "^3.0.0",

assets/tailwind.config.js

@@ -19,6 +19,8 @@ module.exports = {
     },
     extend: {
       spacing: {
+        30: '7.5rem',
+        31: '7.75rem',
         128: '32rem',
         192: '48rem',
         256: '64rem'

lib/cannery_web/components/core_components.ex

@@ -141,6 +141,7 @@ defmodule CanneryWeb.CoreComponents do
   """
   def datetime(assigns)
 
+  attr :id, :string, required: true
   attr :name, :string, required: true
 
   attr :start_date, :string,
@@ -149,7 +150,8 @@ defmodule CanneryWeb.CoreComponents do
   attr :end_date, :string, default: Date.utc_today() |> Date.to_iso8601()
 
   @doc """
-  Phoenix.Component for an element that generates date fields for a range
+  Phoenix.Component for a <time> element that renders the naivedatetime in the
+  user's local timezone
   """
   def date_range(assigns)
 

lib/cannery_web/components/core_components/date_range.html.heex

@@ -1,15 +1,12 @@
-<div class="flex items-center mx-4 my-2 space-x-1">
-  <input
-    class="w-36 text-center input input-primary"
-    name={"#{@name}_start"}
-    type="date"
-    value={@start_date}
-  />
+<div
+  class="flex items-center mx-4 my-2 space-x-1"
+  data-end-date={@end_date}
+  data-start-date={@start_date}
+  id={@id}
+  phx-hook="DateRange"
+  phx-update="ignore"
+>
+  <input class="text-center w-31 input input-primary" name={"#{@name}_start"} />
   <span>—</span>
-  <input
-    class="w-36 text-center input input-primary"
-    name={"#{@name}_end"}
-    type="date"
-    value={@end_date}
-  />
+  <input class="text-center w-31 input input-primary" name={"#{@name}_end"} />
 </div>

lib/cannery_web/live/range_live/index.html.heex

@@ -23,7 +23,7 @@
         container={container}
         current_user={@current_user}
       >
-        <div class="flex flex-wrap justify-center items-center px-4 py-2 h-full min-w-20">
+        <div class="flex justify-center items-center px-4 py-2 h-full min-w-20 flex-wrap">
           <button
             type="button"
             class="mx-2 my-1 text-sm btn btn-primary"
@@ -139,7 +139,7 @@
           class: "title text-primary-600 text-lg text-center"
         ) %>
 
-        <.date_range name="dates" />
+        <.date_range id="shot-record-range-picker" name="dates" />
       </.form>
     </div>