AlchemyCMS/alchemy_cms

import { AlchemyHTMLElement } from "alchemy_admin/components/alchemy_html_element"
import { translate, currentLocale } from "alchemy_admin/i18n"
import flatpickr from "flatpickr"

class Datepicker extends AlchemyHTMLElement {
  static properties = {
    inputType: { default: "date" }
  }

  constructor() {
    super()
    this.flatpickr = undefined
  }

  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",
      enableTime,
      noCalendar: this.inputType === "time",
      time_24hr: translate("formats.time_24hr"),
      onValueUpdate(_selectedDates, _dateStr, instance) {
        instance.element.closest("alchemy-element-editor")?.setDirty()
      }
    }

    if (enableTime) {
      options.dateFormat = "Z"
    }

    return options
  }
}

customElements.define("alchemy-datepicker", Datepicker)