Merge pull request #2768 from AlchemyCMS/backport/7.1-stable/pr-2767

[7.1-stable] Do not include timezone in datepickers only displaying date
AlchemyCMS · Mar 5, 2024 · 87b35a5 · 87b35a5
2 parents 57c9414 + fe52b37
commit 87b35a5
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 6 deletions.
diff --git a/app/javascript/alchemy_admin/components/datepicker.js b/app/javascript/alchemy_admin/components/datepicker.js
@@ -13,26 +13,37 @@ class Datepicker extends AlchemyHTMLElement {
   }
 
   afterRender() {
+    this.flatpickr = flatpickr(
+      this.getElementsByTagName("input")[0],
+      this.flatpickrOptions
+    )
+  }
+
+  disconnected() {
+    this.flatpickr.destroy()
+  }
+
+  get flatpickrOptions() {
+    const enableTime = /time/.test(this.inputType)
     const options = {
       // alchemy_i18n supports `zh_CN` etc., but flatpickr only has two-letter codes (`zh`)
       locale: currentLocale().slice(0, 2),
       altInput: true,
       altFormat: translate(`formats.${this.inputType}`),
       altInputClass: "flatpickr-input",
-      dateFormat: "Z",
-      enableTime: /time/.test(this.inputType),
+      enableTime,
       noCalendar: this.inputType === "time",
       time_24hr: translate("formats.time_24hr"),
       onValueUpdate(_selectedDates, _dateStr, instance) {
         instance.element.closest("alchemy-element-editor")?.setDirty()
       }
     }
 
-    this.flatpickr = flatpickr(this.getElementsByTagName("input")[0], options)
-  }
+    if (enableTime) {
+      options.dateFormat = "Z"
+    }
 
-  disconnected() {
-    this.flatpickr.destroy()
+    return options
   }
 }
 

diff --git a/spec/javascript/alchemy_admin/components/datepicker.spec.js b/spec/javascript/alchemy_admin/components/datepicker.spec.js
@@ -58,4 +58,34 @@ describe("alchemy-datepicker", () => {
       expect(document.querySelector(".flatpickr-calendar")).toBeNull()
     })
   })
+
+  it("should include timezone for time inputs", () => {
+    const html = `
+      <alchemy-datepicker input-type="time">
+        <input type="text">
+      </alchemy-datepicker>
+    `
+    component = renderComponent("alchemy-datepicker", html)
+    expect(component.flatpickrOptions.dateFormat).toEqual("Z")
+  })
+
+  it("should include timezone for datetime inputs", () => {
+    const html = `
+      <alchemy-datepicker input-type="datetime">
+        <input type="text">
+      </alchemy-datepicker>
+    `
+    component = renderComponent("alchemy-datepicker", html)
+    expect(component.flatpickrOptions.dateFormat).toEqual("Z")
+  })
+
+  it("should not include timezone for date inputs", () => {
+    const html = `
+      <alchemy-datepicker input-type="date">
+        <input type="text">
+      </alchemy-datepicker>
+    `
+    component = renderComponent("alchemy-datepicker", html)
+    expect(component.flatpickrOptions.dateFormat).toBeUndefined()
+  })
 })