Rails7(esbuild+stimulus)にdatepickerライブラリのflatpickrをインストールする

Rails7+esbuild+stimulusの構成でflatpickrを使えるところまでを説明します。

flatpickrのインストール

yarn add flatpickr

app/assets/stylesheets/application.scss

// 下記を記載
@import 'flatpickr/dist/flatpickr';

app/javascript/application.js

// 日本語化するため下記を記載
import "flatpickr/dist/l10n/ja.js"

実装イメージ

app/javascript/controllers/hello_controller.js

import { Controller } from "@hotwired/stimulus"
import flatpickr from "flatpickr";

export default class extends Controller {
  static targets = [ "inputDate" ]

  connect() {
    flatpickr(this.inputDateTarget, {
      locale: 'ja',
      dateFormat: 'Y/m/d(D)',
    });
  }
}

view

<div data-controller="hello">
  <input data-hello-target="inputDate" type="text">
</div>

画面確認

flatpickr