Rails7でimportmapを利用してflatpickrを導入後、日本語に対応する

importmap+flatpickrの情報はあったけど、Localeを設定する情報がなかったので記録しておく。

Rails 7, importmaps, Stimulusは導入済みとする。

↓importmapでpinする

$ ./bin/importmap pin flatpickr
$ ./bin/importmap pin flatpickr/dist/l10n/ja

↓こんなのが出来上がる。

config/importmap.rb

pin "application", preload: true
pin "@hotwired/stimulus", to: "stimulus.min.js", preload: true
pin "@hotwired/stimulus-loading", to: "stimulus-loading.js", preload: true
pin_all_from "app/javascript/controllers", under: "controllers"

pin "flatpickr", to: "https://ga.jspm.io/npm:flatpickr@4.6.13/dist/esm/index.js", preload: true
pin "flatpickr/dist/l10n/ja", to: "https://ga.jspm.io/npm:flatpickr@4.6.13/dist/l10n/ja.js"

↓こんなのを作る。

app/javascript/controllers/flatpickr_controller.js

import { Controller } from "@hotwired/stimulus"
import flatpickr from "flatpickr";
import { Japanese } from "flatpickr/dist/l10n/ja";

export default class extends Controller {
  connect() {
    var config = { locale: Japanese, dateFormat: "Y-m-d" }
    flatpickr(this.element, config);
  }
}

↓使いたいところにこんな感じにする。

_form.html.erb

    <%= form.text_field :date, data: { controller: "flatpickr" } %>

↓完成。わーい