【簡単】年月のみ表示カレンダーを作成してみた

こんにちは！ C-limber(クライマー)株式会社 新米エンジニアの宮城です。 まだまだ寒い日が続きますが、弊社の社内雑談が面白くて、業務中いつもホンワカしている今日この頃です。今回は、簡単にカレンダー表示のできるflatpickrを紹介したいと思います。

flatpickrとは

flatpickrは、ライブラリに依存せず、軽量かつ高機能なdate-pickerです。 公式サイト flatpickrドキュメント翻訳 GitHub

導入

簡単にCDNで読み込むことで、flatpickrを使用することができます。head内に下記を書くだけで、導入は完了です。

実際に使用してみよう

input要素に、任意のidまたはclass名を付けて後はflatpickrで呼び出すだけ！これで簡単にカレンダー表示ができます。（一部Bootstrapを使用しています。） フォームをクリックするだけで、カレンダー表示されます。

年月のみ表示にカスタマイズしてみよう

head内に下記を追記する。 オプションを追記する。 簡単に年月のみ表示されました！

おまけ

①日本語化

head内に下記を追記 flatpickrに、日本語化のオプションを追記 簡単に日本語へ変更できます。

②デザインを変更する

head内に好みのデザインを追記するだけで、簡単にテーマを変更することができます 好みでカスタマイズして下さいね！

③年月のみ表示カレンダーで、開始月・終了月の入力フォームに期間指定の処理を追加する

![](https://api.athenal.jp/uploads/wordress/2022/02/21112426/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88-2022-02-21-11.23.53.png) 

Javascript部分の処理

開始月は2021年12月以降しか選択できず、終了月は2月以降しか選択できないようにカスタマイズできました。

Javascript部分の処理の説明

・minDateオプションは、選択可能な日付の範囲指定のうち、最小(最も早い)日付を指定することができます。 minDateを指定すると、minDate以前の日付を選択することはできなくなります。 ・monthSelectPluginで月のみを表示するカレンダーを生成することができます。 ・JavaScriptのDateオブジェクトで、単一の瞬間の時刻をプラットフォームに依存しない形式で取得し、end_month変数へ代入。当月（今月は2月）を取得しdt変数へ代入。dtをminDateへ代入することにより、今月以降しか選択できないようにしています。

まとめ

今回は、flatpickrについてまとめてみました。簡単にカレンダーを作成できるので、いろんなオプションを使用して、自分好みにカスタマイズしてみて下さい。