Sha256: 090751504aa022b4324331ad0a2337a5db601644101ce8d22a9e4de1506c12f9

Contents?: true

Size: 1.26 KB

Versions: 27

Compression:

Stored size: 1.26 KB

Contents

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)

Version data entries

27 entries across 27 versions & 1 rubygems

Version Path
alchemy_cms-7.4.2 app/javascript/alchemy_admin/components/datepicker.js
alchemy_cms-7.3.6 app/javascript/alchemy_admin/components/datepicker.js
alchemy_cms-7.2.9 app/javascript/alchemy_admin/components/datepicker.js
alchemy_cms-7.4.1 app/javascript/alchemy_admin/components/datepicker.js
alchemy_cms-7.4.0 app/javascript/alchemy_admin/components/datepicker.js
alchemy_cms-7.3.5 app/javascript/alchemy_admin/components/datepicker.js
alchemy_cms-7.2.8 app/javascript/alchemy_admin/components/datepicker.js
alchemy_cms-7.1.13 app/javascript/alchemy_admin/components/datepicker.js
alchemy_cms-7.3.4 app/javascript/alchemy_admin/components/datepicker.js
alchemy_cms-7.3.3 app/javascript/alchemy_admin/components/datepicker.js
alchemy_cms-7.3.2 app/javascript/alchemy_admin/components/datepicker.js
alchemy_cms-7.2.7 app/javascript/alchemy_admin/components/datepicker.js
alchemy_cms-7.3.1 app/javascript/alchemy_admin/components/datepicker.js
alchemy_cms-7.3.0 app/javascript/alchemy_admin/components/datepicker.js
alchemy_cms-7.2.6 app/javascript/alchemy_admin/components/datepicker.js
alchemy_cms-7.2.5 app/javascript/alchemy_admin/components/datepicker.js
alchemy_cms-7.1.12 app/javascript/alchemy_admin/components/datepicker.js
alchemy_cms-7.2.4 app/javascript/alchemy_admin/components/datepicker.js
alchemy_cms-7.1.11 app/javascript/alchemy_admin/components/datepicker.js
alchemy_cms-7.2.3 app/javascript/alchemy_admin/components/datepicker.js