Laravel で flatpickr を使ってカレンダーでの月選択

普通にflatpickrをインストールして、日付を選択するだけなら容易なのですが、
flatpickrの公式から月のみ表示して、月を選択できるようになったのでやってみます。

ミスがありましたらご指摘お願いいたします。

動作

公式より
こちらから確認できます

インストール

CDN版

//flatpickrのCDN
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
//flatpickrの月選択プラグイン
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr@latest/dist/plugins/monthSelect/style.css">
<script src="https://cdn.jsdelivr.net/npm/flatpickr@latest/dist/plugins/monthSelect/index.js"></script>

npm

npm

npm i flatpickr --save

resources/js/app.js

import flatpickr from "flatpickr";
import monthSelectPlugin from 'flatpickr/dist/plugins/monthSelect/index';

resources/sass/app.js

@import "../../node_modules/flatpickr/dist/themes/airbnb.css";

@import "../../node_modules/flatpickr/dist/plugins/monthSelect/style.css";

使用

インストールしたら使用できるようになるので、使ってみます

resources/js/app.js

flatpickr(".js-calendar", {
        plugins: [
            new monthSelectPlugin({})
        ],
      })

コンパイルして表示を確認します

npm run dev

日本語化しているとこのような表示になります。

参考にしたサイト