rails-datepicker 0.1.0

data/app/javascript/controllers/rails_datepicker_controller.js

@@ -0,0 +1,412 @@
+import { Controller } from "@hotwired/stimulus"
+import {
+  MONTHS, WEEKDAYS, addDays, calendarParts, ethiopianToGregorian,
+  formatDate, labels, monthLength, parseFormatted, parseIso,
+  partsToGregorian, shiftMonth, toIso
+} from "rails-datepicker/calendar"
+
+export default class extends Controller {
+  static targets = ["input", "canonical", "trigger", "popover", "weekdays", "grid", "monthSelect", "yearSelect", "calendarToggle", "localeToggle"]
+  static values = {
+    calendar: { type: String, default: "ethiopian" },
+    displayCalendar: String,
+    locale: { type: String, default: "am" },
+    format: { type: String, default: "YYYY-MM-DD" },
+    theme: { type: String, default: "auto" },
+    weekStart: { type: String, default: "sunday" },
+    ethiopicNumerals: { type: Boolean, default: false },
+    inline: { type: Boolean, default: false },
+    min: String,
+    max: String,
+    disabledDates: { type: Array, default: [] },
+    yearsBefore: { type: Number, default: 100 },
+    yearsAfter: { type: Number, default: 20 },
+    selected: String
+  }
+
+  initialize() {
+    this.handleOutside = this.handleOutside.bind(this)
+    this.reposition = this.reposition.bind(this)
+  }
+
+  connect() {
+    this.disabledSet = new Set(this.disabledDatesValue)
+    this.selectedDate = this.safeParseIso(this.canonicalTarget.value || this.selectedValue)
+    this.viewDate = this.selectedDate || this.todayDate()
+    this.opened = this.inlineValue
+    this.render()
+    document.addEventListener("pointerdown", this.handleOutside)
+    window.addEventListener("resize", this.reposition)
+    window.addEventListener("scroll", this.reposition, true)
+  }
+
+  disconnect() {
+    document.removeEventListener("pointerdown", this.handleOutside)
+    window.removeEventListener("resize", this.reposition)
+    window.removeEventListener("scroll", this.reposition, true)
+  }
+
+  toggle(event) {
+    event.preventDefault()
+    this.opened ? this.close() : this.open()
+  }
+
+  open() {
+    if (this.inlineValue || this.inputTarget.disabled) return
+    this.opened = true
+    this.popoverTarget.hidden = false
+    this.inputTarget.setAttribute("aria-expanded", "true")
+    this.render()
+    requestAnimationFrame(() => {
+      this.positionPopover()
+      this.focusPreferredDay()
+    })
+  }
+
+  close({ restoreFocus = false } = {}) {
+    if (this.inlineValue) return
+    this.opened = false
+    this.popoverTarget.hidden = true
+    this.inputTarget.setAttribute("aria-expanded", "false")
+    if (restoreFocus) (this.hasTriggerTarget ? this.triggerTarget : this.inputTarget).focus()
+  }
+
+  selectDate(event) {
+    event.preventDefault()
+    const date = this.safeParseIso(event.currentTarget.dataset.iso)
+    if (this.inputTarget.disabled || !date || this.restricted(date)) return
+    this.commit(date)
+    this.close({ restoreFocus: true })
+  }
+
+  switchCalendar(event) {
+    event.preventDefault()
+    if (this.inputTarget.disabled) return
+    const anchor = partsToGregorian({ ...calendarParts(this.viewDate, this.calendarValue), day: 1 }, this.calendarValue)
+    this.calendarValue = this.calendarValue === "ethiopian" ? "gregorian" : "ethiopian"
+    this.viewDate = anchor
+    if (this.selectedDate) this.inputTarget.value = this.formatSelection(this.selectedDate)
+    this.render()
+  }
+
+  switchLocale(event) {
+    event.preventDefault()
+    if (this.inputTarget.disabled) return
+    this.localeValue = this.localeValue === "am" ? "en" : "am"
+    this.render()
+    if (this.inputTarget.validationMessage) this.validate()
+    this.reposition()
+  }
+
+  formatSelection(date) {
+    return formatDate(date, this.formatValue, this.displayCalendarValue || this.calendarValue, this.ethiopicNumeralsValue)
+  }
+
+  previousMonth() { this.navigateMonths(-1) }
+  nextMonth() { this.navigateMonths(1) }
+  previousYear() { this.navigateYears(-1) }
+  nextYear() { this.navigateYears(1) }
+
+  selectMonth(event) {
+    const parts = calendarParts(this.viewDate, this.calendarValue)
+    parts.month = Number(event.currentTarget.value)
+    parts.day = 1
+    this.viewDate = partsToGregorian(parts, this.calendarValue)
+    this.render()
+  }
+
+  selectYear(event) {
+    const parts = calendarParts(this.viewDate, this.calendarValue)
+    parts.year = Number(event.currentTarget.value)
+    parts.day = 1
+    this.viewDate = partsToGregorian(parts, this.calendarValue)
+    this.render()
+  }
+
+  today(event) {
+    event.preventDefault()
+    if (this.inputTarget.disabled) return
+    const date = this.todayDate()
+    if (this.restricted(date)) return
+    this.commit(date)
+    this.close({ restoreFocus: true })
+  }
+
+  clear(event) {
+    event.preventDefault()
+    if (this.inputTarget.disabled) return
+
+    this.selectedDate = null
+    this.selectedValue = ""
+    this.canonicalTarget.value = ""
+    this.inputTarget.value = ""
+    this.setValidity("")
+    this.dispatchChanges()
+    this.render()
+    this.close({ restoreFocus: true })
+  }
+
+  input() {
+    this.setValidity("")
+  }
+
+  validate() {
+    const value = this.inputTarget.value.trim()
+    if (!value) {
+      if (this.inputTarget.required) this.setValidity(labels(this.localeValue).invalid)
+      else this.clearWithoutEvent()
+      return
+    }
+    try {
+      const date = parseFormatted(value, this.formatValue, this.displayCalendarValue || this.calendarValue)
+      if (this.restricted(date)) throw new RangeError(labels(this.localeValue).unavailable)
+      this.commit(date)
+    } catch (error) {
+      this.setValidity(error.message === labels(this.localeValue).unavailable ? error.message : labels(this.localeValue).invalid)
+    }
+  }
+
+  inputKeydown(event) {
+    if (event.key === "ArrowDown" || (event.altKey && event.key === "ArrowDown")) {
+      event.preventDefault()
+      this.open()
+    } else if (event.key === "Enter") {
+      this.validate()
+    } else if (event.key === "Escape") {
+      this.close()
+    }
+  }
+
+  calendarKeydown(event) {
+    const active = event.target.closest("[data-rdp-day]")
+    if (event.key === "Escape") {
+      event.preventDefault()
+      this.close({ restoreFocus: true })
+      return
+    }
+    if (!active) return
+
+    const moves = { ArrowLeft: -1, ArrowRight: 1, ArrowUp: -7, ArrowDown: 7 }
+    let next
+    if (moves[event.key]) next = addDays(parseIso(active.dataset.iso), moves[event.key])
+    else if (event.key === "Home") next = addDays(parseIso(active.dataset.iso), -((active.dataset.weekday - this.weekStartIndex() + 7) % 7))
+    else if (event.key === "End") next = addDays(parseIso(active.dataset.iso), 6 - ((active.dataset.weekday - this.weekStartIndex() + 7) % 7))
+    else if (event.key === "PageUp" || event.key === "PageDown") {
+      const amount = event.key === "PageUp" ? -1 : 1
+      event.preventDefault()
+      if (event.shiftKey) this.navigateYears(amount)
+      else this.navigateMonths(amount)
+      this.focusPreferredDay()
+      return
+    } else return
+
+    event.preventDefault()
+    this.focusDate(next)
+  }
+
+  handleOutside(event) {
+    if (this.opened && !this.inlineValue && !this.element.contains(event.target)) this.close()
+  }
+
+  reposition() {
+    if (this.opened && !this.inlineValue) this.positionPopover()
+  }
+
+  render() {
+    this.renderLocale()
+    this.renderToggle()
+    this.renderSelectors()
+    this.renderWeekdays()
+    this.renderDays()
+  }
+
+  renderLocale() {
+    const copy = labels(this.localeValue)
+    this.element.lang = this.localeValue
+    for (const element of this.element.querySelectorAll("[data-rails-datepicker-label]")) {
+      element.setAttribute("aria-label", copy[element.dataset.railsDatepickerLabel])
+    }
+    for (const element of this.element.querySelectorAll("[data-rails-datepicker-text]")) {
+      element.textContent = copy[element.dataset.railsDatepickerText]
+    }
+    if (this.hasLocaleToggleTarget) {
+      this.localeToggleTarget.textContent = this.localeValue === "am" ? "English" : "አማርኛ"
+      this.localeToggleTarget.setAttribute("aria-label", copy.switchLanguage)
+    }
+  }
+
+  renderToggle() {
+    const next = this.calendarValue === "ethiopian" ? "gregorian" : "ethiopian"
+    const copy = labels(this.localeValue)
+    this.calendarToggleTarget.textContent = copy[next]
+    this.calendarToggleTarget.setAttribute("aria-label", copy[`switchTo${next[0].toUpperCase()}${next.slice(1)}`])
+  }
+
+  renderSelectors() {
+    const current = calendarParts(this.viewDate, this.calendarValue)
+    const names = MONTHS[this.calendarValue][this.localeValue] || MONTHS[this.calendarValue].en
+    this.monthSelectTarget.innerHTML = names.map((name, index) => `<option value="${index + 1}"${index + 1 === current.month ? " selected" : ""}>${name}</option>`).join("")
+    const minYear = current.year - this.yearsBeforeValue
+    const maxYear = current.year + this.yearsAfterValue
+    let years = ""
+    for (let year = maxYear; year >= minYear; year -= 1) years += `<option value="${year}"${year === current.year ? " selected" : ""}>${year}</option>`
+    this.yearSelectTarget.innerHTML = years
+  }
+
+  renderWeekdays() {
+    const days = WEEKDAYS[this.localeValue] || WEEKDAYS.en
+    const ordered = [...days.slice(this.weekStartIndex()), ...days.slice(0, this.weekStartIndex())]
+    this.weekdaysTarget.innerHTML = ordered.map(day => `<span class="rdp__weekday" role="columnheader">${day}</span>`).join("")
+  }
+
+  renderDays() {
+    const parts = calendarParts(this.viewDate, this.calendarValue)
+    const firstDate = partsToGregorian({ year: parts.year, month: parts.month, day: 1 }, this.calendarValue)
+    const offset = (firstDate.getUTCDay() - this.weekStartIndex() + 7) % 7
+    const count = monthLength(parts.year, parts.month, this.calendarValue)
+    const todayIso = toIso(this.todayDate())
+    const selectedIso = this.selectedDate ? toIso(this.selectedDate) : ""
+    const visibleMonth = date => {
+      const value = calendarParts(date, this.calendarValue)
+      return value.year === parts.year && value.month === parts.month
+    }
+    let tabbableIso = ""
+    if (this.selectedDate && visibleMonth(this.selectedDate) && !this.restricted(this.selectedDate)) {
+      tabbableIso = selectedIso
+    } else {
+      const today = this.todayDate()
+      if (visibleMonth(today) && !this.restricted(today)) tabbableIso = todayIso
+    }
+    if (!tabbableIso) {
+      for (let day = 1; day <= count; day += 1) {
+        const date = partsToGregorian({ ...parts, day }, this.calendarValue)
+        if (!this.restricted(date)) {
+          tabbableIso = toIso(date)
+          break
+        }
+      }
+    }
+    const cells = []
+
+    for (let index = 0; index < Math.ceil((offset + count) / 7) * 7; index += 1) {
+      const day = index - offset + 1
+      if (day < 1 || day > count) {
+        cells.push("<span class=\"rdp__day rdp__day--empty\" role=\"gridcell\"></span>")
+        continue
+      }
+      const date = this.calendarValue === "ethiopian" ? ethiopianToGregorian(parts.year, parts.month, day) : partsToGregorian({ ...parts, day }, "gregorian")
+      const iso = toIso(date)
+      const disabled = this.restricted(date)
+      const classes = ["rdp__day"]
+      if (iso === todayIso) classes.push("rdp__day--today")
+      if (iso === selectedIso) classes.push("rdp__day--selected")
+      cells.push(`<button type="button" class="${classes.join(" ")}" role="gridcell" data-rdp-day data-iso="${iso}" data-weekday="${date.getUTCDay()}" tabindex="${iso === tabbableIso ? "0" : "-1"}" aria-selected="${iso === selectedIso}"${iso === todayIso ? " aria-current=\"date\"" : ""}${disabled ? " disabled aria-disabled=\"true\"" : ""} data-action="rails-datepicker#selectDate">${this.dayLabel(day)}</button>`)
+    }
+    this.gridTarget.innerHTML = cells.join("")
+  }
+
+  dayLabel(day) {
+    if (!this.ethiopicNumeralsValue) return day
+    return formatDate(partsToGregorian({ year: 2000, month: 1, day }, "gregorian"), "DD", "gregorian", true).replace(/^0/, "")
+  }
+
+  navigateMonths(amount) {
+    const parts = shiftMonth({ ...calendarParts(this.viewDate, this.calendarValue), day: 1 }, amount, this.calendarValue)
+    this.viewDate = partsToGregorian(parts, this.calendarValue)
+    this.render()
+  }
+
+  navigateYears(amount) {
+    const parts = calendarParts(this.viewDate, this.calendarValue)
+    parts.year += amount
+    parts.day = 1
+    this.viewDate = partsToGregorian(parts, this.calendarValue)
+    this.render()
+  }
+
+  commit(date) {
+    this.selectedDate = date
+    this.viewDate = date
+    const iso = toIso(date)
+    this.selectedValue = iso
+    this.canonicalTarget.value = iso
+    this.inputTarget.value = this.formatSelection(date)
+    this.setValidity("")
+    this.dispatchChanges()
+    this.render()
+  }
+
+  dispatchChanges() {
+    for (const target of [this.canonicalTarget, this.inputTarget]) {
+      target.dispatchEvent(new Event("input", { bubbles: true }))
+      target.dispatchEvent(new Event("change", { bubbles: true }))
+    }
+  }
+
+  clearWithoutEvent() {
+    this.selectedDate = null
+    this.selectedValue = ""
+    this.canonicalTarget.value = ""
+    this.setValidity("")
+    this.render()
+  }
+
+  restricted(date) {
+    const iso = toIso(date)
+    return this.inputTarget.disabled ||
+      (this.hasMinValue && this.minValue !== "" && iso < this.minValue) ||
+      (this.hasMaxValue && this.maxValue !== "" && iso > this.maxValue) ||
+      this.disabledSet.has(iso)
+  }
+
+  setValidity(message) {
+    this.inputTarget.setCustomValidity(message)
+    this.inputTarget.setAttribute("aria-invalid", String(Boolean(message)))
+  }
+
+  positionPopover() {
+    const anchor = this.element.querySelector(".rdp__input-group").getBoundingClientRect()
+    const panel = this.popoverTarget
+    const margin = 8
+    const width = Math.min(288, window.innerWidth - (margin * 2))
+    panel.style.width = `${width}px`
+    const panelHeight = panel.offsetHeight
+    const below = window.innerHeight - anchor.bottom
+    const top = below >= panelHeight + margin || below >= anchor.top ? anchor.bottom + margin : anchor.top - panelHeight - margin
+    const left = Math.min(Math.max(margin, anchor.left), window.innerWidth - width - margin)
+    panel.style.top = `${Math.max(margin, top)}px`
+    panel.style.left = `${left}px`
+  }
+
+  focusPreferredDay() {
+    const preferred = this.selectedDate ? toIso(this.selectedDate) : toIso(this.todayDate())
+    const target = this.gridTarget.querySelector(`[data-iso="${preferred}"]:not(:disabled)`) || this.gridTarget.querySelector("[data-rdp-day]:not(:disabled)")
+    target?.focus()
+  }
+
+  focusDate(date) {
+    if (this.restricted(date)) return
+    const targetParts = calendarParts(date, this.calendarValue)
+    const currentParts = calendarParts(this.viewDate, this.calendarValue)
+    if (targetParts.year !== currentParts.year || targetParts.month !== currentParts.month) {
+      this.viewDate = date
+      this.render()
+    }
+    const target = this.gridTarget.querySelector(`[data-iso="${toIso(date)}"]:not(:disabled)`)
+    target?.focus()
+  }
+
+  weekStartIndex() { return this.weekStartValue === "monday" ? 1 : 0 }
+
+  safeParseIso(value) {
+    try { return value ? parseIso(value) : null } catch (_) { return null }
+  }
+
+  todayDate() {
+    const now = new Date()
+    const date = new Date(0)
+    date.setUTCHours(0, 0, 0, 0)
+    date.setUTCFullYear(now.getFullYear(), now.getMonth(), now.getDate())
+    return date
+  }
+}

data/app/javascript/rails-datepicker/calendar.js

@@ -0,0 +1,236 @@
+const MS_PER_DAY = 86_400_000
+const ETHIOPIAN_ANCHOR_YEAR = 2015
+const ETHIOPIAN_ANCHOR_DATE = utcDate(2022, 9, 11)
+
+export const MONTHS = {
+  gregorian: {
+    en: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
+    am: ["ጃንዩወሪ", "ፌብሩወሪ", "ማርች", "ኤፕሪል", "ሜይ", "ጁን", "ጁላይ", "ኦገስት", "ሴፕቴምበር", "ኦክቶበር", "ኖቬምበር", "ዲሴምበር"]
+  },
+  ethiopian: {
+    en: ["Meskerem", "Tikimt", "Hidar", "Tahsas", "Tir", "Yekatit", "Megabit", "Miazia", "Ginbot", "Sene", "Hamle", "Nehase", "Pagume"],
+    am: ["መስከረም", "ጥቅምት", "ኅዳር", "ታኅሣሥ", "ጥር", "የካቲት", "መጋቢት", "ሚያዝያ", "ግንቦት", "ሰኔ", "ሐምሌ", "ነሐሴ", "ጳጉሜን"]
+  }
+}
+
+export const WEEKDAYS = {
+  en: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
+  am: ["እሑድ", "ሰኞ", "ማክሰኞ", "ረቡዕ", "ሐሙስ", "ዓርብ", "ቅዳሜ"]
+}
+
+const LABELS = {
+  en: {
+    open_calendar: "Open calendar", choose_date: "Choose date",
+    previous_year: "Previous year", previous_month: "Previous month", next_month: "Next month", next_year: "Next year",
+    month: "Month", year: "Year", today: "Today", clear: "Clear", switchLanguage: "Switch to Amharic",
+    ethiopian: "Ethiopian", gregorian: "Gregorian", invalid: "Enter a valid date",
+    unavailable: "This date is unavailable", switchToEthiopian: "Switch to Ethiopian calendar",
+    switchToGregorian: "Switch to Gregorian calendar"
+  },
+  am: {
+    open_calendar: "ቀን መቁጠሪያ ክፈት", choose_date: "ቀን ይምረጡ",
+    previous_year: "ያለፈው ዓመት", previous_month: "ያለፈው ወር", next_month: "ቀጣይ ወር", next_year: "ቀጣይ ዓመት",
+    month: "ወር", year: "ዓመት", today: "ዛሬ", clear: "አጽዳ", switchLanguage: "ወደ እንግሊዝኛ ቀይር",
+    ethiopian: "የኢትዮጵያ", gregorian: "ጎርጎርዮሳዊ", invalid: "ትክክለኛ ቀን ያስገቡ",
+    unavailable: "ይህ ቀን አይገኝም", switchToEthiopian: "ወደ ኢትዮጵያ የቀን መቁጠሪያ ቀይር",
+    switchToGregorian: "ወደ ጎርጎርዮሳዊ የቀን መቁጠሪያ ቀይር"
+  }
+}
+
+export function labels(locale = "en") {
+  return LABELS[locale] || LABELS.en
+}
+
+export function gregorianLeapYear(year) {
+  return year % 4 === 0 && (year % 100 !== 0 || year % 400 === 0)
+}
+
+export function ethiopianLeapYear(year) {
+  return year % 4 === 3
+}
+
+export function ethiopianMonthLength(year, month) {
+  if (!Number.isInteger(year) || year < 1 || !Number.isInteger(month) || month < 1 || month > 13) return 0
+  return month <= 12 ? 30 : (ethiopianLeapYear(year) ? 6 : 5)
+}
+
+export function gregorianMonthLength(year, month) {
+  if (!Number.isInteger(year) || year < 1 || !Number.isInteger(month) || month < 1 || month > 12) return 0
+  if (month === 2) return gregorianLeapYear(year) ? 29 : 28
+  return [4, 6, 9, 11].includes(month) ? 30 : 31
+}
+
+export function validEthiopianDate(year, month, day) {
+  return Number.isInteger(day) && day >= 1 && day <= ethiopianMonthLength(year, month)
+}
+
+export function validGregorianDate(year, month, day) {
+  return Number.isInteger(day) && day >= 1 && day <= gregorianMonthLength(year, month)
+}
+
+export function ethiopianNewYear(year) {
+  if (!Number.isInteger(year) || year < 1) throw new RangeError("Ethiopian year must be positive")
+  return addDays(ETHIOPIAN_ANCHOR_DATE, daysBeforeEthiopianYear(year) - daysBeforeEthiopianYear(ETHIOPIAN_ANCHOR_YEAR))
+}
+
+export function ethiopianToGregorian(year, month, day) {
+  if (!validEthiopianDate(year, month, day)) throw new RangeError("Invalid Ethiopian date")
+  return addDays(ethiopianNewYear(year), ((month - 1) * 30) + day - 1)
+}
+
+export function gregorianToEthiopian(value) {
+  const date = typeof value === "string" ? parseIso(value) : normalizedDate(value)
+  if (date < ethiopianNewYear(1)) throw new RangeError("Date predates the Ethiopian calendar")
+  let year = Math.max(date.getUTCFullYear() - 7, 1)
+  while (date < ethiopianNewYear(year)) year -= 1
+  while (date >= ethiopianNewYear(year + 1)) year += 1
+  const offset = daysBetween(ethiopianNewYear(year), date)
+  return { year, month: Math.floor(offset / 30) + 1, day: (offset % 30) + 1 }
+}
+
+export function parseIso(value) {
+  const match = /^(\d{4,})-(\d{2})-(\d{2})$/.exec(String(value || ""))
+  if (!match) throw new RangeError("Date must use YYYY-MM-DD")
+  const [year, month, day] = match.slice(1).map(Number)
+  if (!validGregorianDate(year, month, day)) throw new RangeError("Invalid Gregorian date")
+  return utcDate(year, month, day)
+}
+
+export function toIso(value) {
+  const date = normalizedDate(value)
+  return `${String(date.getUTCFullYear()).padStart(4, "0")}-${String(date.getUTCMonth() + 1).padStart(2, "0")}-${String(date.getUTCDate()).padStart(2, "0")}`
+}
+
+export function calendarParts(date, calendar) {
+  if (calendar === "ethiopian") return gregorianToEthiopian(date)
+  const normalized = normalizedDate(date)
+  return { year: normalized.getUTCFullYear(), month: normalized.getUTCMonth() + 1, day: normalized.getUTCDate() }
+}
+
+export function partsToGregorian(parts, calendar) {
+  const { year, month, day } = parts
+  if (calendar === "ethiopian") return ethiopianToGregorian(year, month, day)
+  if (!validGregorianDate(year, month, day)) throw new RangeError("Invalid Gregorian date")
+  return utcDate(year, month, day)
+}
+
+export function monthLength(year, month, calendar) {
+  return calendar === "ethiopian" ? ethiopianMonthLength(year, month) : gregorianMonthLength(year, month)
+}
+
+export function shiftMonth(parts, amount, calendar) {
+  const count = calendar === "ethiopian" ? 13 : 12
+  const index = (parts.year * count) + parts.month - 1 + amount
+  const year = Math.floor(index / count)
+  const month = ((index % count) + count) % count + 1
+  return { year, month, day: Math.min(parts.day || 1, monthLength(year, month, calendar)) }
+}
+
+export function parseFormatted(value, format, calendar) {
+  const raw = String(value || "").trim()
+  const containsEthiopicNumerals = /[፩-፺፻፼]/u.test(raw)
+  const normalized = normalizeEthiopicNumerals(raw)
+  const tokens = []
+  const configuredFormat = String(format || "YYYY-MM-DD")
+  let pattern = ""
+  let lastIndex = 0
+  for (const match of configuredFormat.matchAll(/YYYY|MM|DD/g)) {
+    pattern += escapeRegex(configuredFormat.slice(lastIndex, match.index))
+    const token = match[0]
+    tokens.push(token)
+    pattern += token === "YYYY" ? "(\\d{4,})" : (containsEthiopicNumerals ? "(\\d{1,2})" : "(\\d{2})")
+    lastIndex = match.index + token.length
+  }
+  pattern += escapeRegex(configuredFormat.slice(lastIndex))
+  const parsed = new RegExp(`^${pattern}$`).exec(normalized)
+  if (!parsed || tokens.length !== 3 || new Set(tokens).size !== 3) throw new RangeError("Invalid date format")
+  const values = {}
+  tokens.forEach((token, index) => { values[token] = Number(parsed[index + 1]) })
+  return partsToGregorian({ year: values.YYYY, month: values.MM, day: values.DD }, calendar)
+}
+
+export function formatDate(value, format, calendar, useEthiopicNumerals = false) {
+  const { year, month, day } = calendarParts(value, calendar)
+  const result = String(format || "YYYY-MM-DD")
+    .replace("YYYY", String(year).padStart(4, "0"))
+    .replace("MM", String(month).padStart(2, "0"))
+    .replace("DD", String(day).padStart(2, "0"))
+  return useEthiopicNumerals ? result.replace(/\d+/g, number => encodeEthiopicInteger(Number(number))) : result
+}
+
+export function encodeEthiopicInteger(number) {
+  if (number === 0) return "0"
+  if (!Number.isSafeInteger(number) || number < 0) throw new RangeError("Expected a positive integer")
+  if (number >= 10000) {
+    const high = Math.floor(number / 10000)
+    const low = number % 10000
+    return `${high === 1 ? "" : encodeEthiopicInteger(high)}፼${low ? encodeEthiopicInteger(low) : ""}`
+  }
+  const hundreds = Math.floor(number / 100)
+  const remainder = number % 100
+  const prefix = hundreds ? `${hundreds === 1 ? "" : encodeBelowHundred(hundreds)}፻` : ""
+  return `${prefix}${encodeBelowHundred(remainder)}`
+}
+
+export function normalizeEthiopicNumerals(value) {
+  return value.replace(/[፩-፺፻፼]+/gu, token => String(decodeEthiopicInteger(token)))
+}
+
+export function decodeEthiopicInteger(value) {
+  const text = String(value)
+  if (text.includes("፼")) {
+    const [left, ...rest] = text.split("፼")
+    return (left ? decodeEthiopicInteger(left) : 1) * 10000 + (rest.join("፼") ? decodeEthiopicInteger(rest.join("፼")) : 0)
+  }
+  const [left, right] = text.split("፻")
+  if (right !== undefined) return (left ? decodeBelowHundred(left) : 1) * 100 + decodeBelowHundred(right)
+  return decodeBelowHundred(left)
+}
+
+export function addDays(value, days) {
+  const date = normalizedDate(value)
+  return new Date(date.getTime() + (days * MS_PER_DAY))
+}
+
+export function daysBetween(from, to) {
+  return Math.round((normalizedDate(to).getTime() - normalizedDate(from).getTime()) / MS_PER_DAY)
+}
+
+function utcDate(year, month, day) {
+  const date = new Date(0)
+  date.setUTCHours(0, 0, 0, 0)
+  date.setUTCFullYear(year, month - 1, day)
+  return date
+}
+
+function normalizedDate(value) {
+  if (!(value instanceof Date) || Number.isNaN(value.getTime())) throw new RangeError("Invalid date")
+  return utcDate(value.getUTCFullYear(), value.getUTCMonth() + 1, value.getUTCDate())
+}
+
+function daysBeforeEthiopianYear(year) {
+  return (365 * (year - 1)) + Math.floor(year / 4)
+}
+
+function escapeRegex(value) {
+  return value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")
+}
+
+const ONES = ["", "፩", "፪", "፫", "፬", "፭", "፮", "፯", "፰", "፱"]
+const TENS = ["", "፲", "፳", "፴", "፵", "፶", "፷", "፸", "፹", "፺"]
+
+function encodeBelowHundred(number) {
+  return `${TENS[Math.floor(number / 10)]}${ONES[number % 10]}`
+}
+
+function decodeBelowHundred(text = "") {
+  let result = 0
+  for (const character of text) {
+    const one = ONES.indexOf(character)
+    const ten = TENS.indexOf(character)
+    if (one > 0) result += one
+    else if (ten > 0) result += ten * 10
+    else throw new RangeError("Invalid Ethiopic numeral")
+  }
+  return result
+}

data/app/javascript/rails-datepicker/index.js

@@ -0,0 +1 @@
+export * from "./calendar.js"

data/config/importmap.rb

@@ -0,0 +1,2 @@
+pin "rails-datepicker/calendar", to: "rails-datepicker/calendar.js"
+pin "rails-datepicker/controller", to: "controllers/rails_datepicker_controller.js"

data/config/locales/rails_datepicker.am.yml

@@ -0,0 +1,12 @@
+am:
+  rails_datepicker:
+    open_calendar: "ቀን መቁጠሪያ ክፈት"
+    choose_date: "ቀን ይምረጡ"
+    previous_year: "ያለፈው ዓመት"
+    previous_month: "ያለፈው ወር"
+    next_month: "ቀጣይ ወር"
+    next_year: "ቀጣይ ዓመት"
+    month: "ወር"
+    year: "ዓመት"
+    today: "ዛሬ"
+    clear: "አጽዳ"

data/config/locales/rails_datepicker.en.yml

@@ -0,0 +1,12 @@
+en:
+  rails_datepicker:
+    open_calendar: "Open calendar"
+    choose_date: "Choose date"
+    previous_year: "Previous year"
+    previous_month: "Previous month"
+    next_month: "Next month"
+    next_year: "Next year"
+    month: "Month"
+    year: "Year"
+    today: "Today"
+    clear: "Clear"