date_controller.js

import { Controller } from "stimulus"
import strftime from "strftime"
import { capitalize } from "src/helpers"
  
const LOCALIZED_STRFTIME = {
  en: strftime.localizeByIdentifier("en_US"),
  fr: strftime.localizeByIdentifier("fr_FR"),
  es: strftime.localizeByIdentifier("es_MX"),
  it: strftime.localizeByIdentifier("it_IT"),
  de: strftime.localizeByIdentifier("de_DE"),
  pt: strftime.localizeByIdentifier("pt_BR"),
}       
    
const FORMATS = {
  en: "%A %-d %B %Y",
  fr: "%A %-d %B %Y",
  es: "%A %-d de %B de %Y",
  it: "%A %-d %B %Y",
  de: "%A, %-d. %B %Y",
  pt: "%A, %-d de %B de %Y",
}

export default class extends Controller {
  connect() {
    const locale = this.data.get("locale")
    const date = new Date(this.data.get("date"))
    const localizedStrftime = LOCALIZED_STRFTIME[locale]
    if (!localizedStrftime) return
    this.element.innerText = capitalize(
      localizedStrftime(FORMATS[locale], date)
    )
  }
}