【簡単】年月のみ表示カレンダーを作成してみた
公開日：
2022.02.25
こんにちは！
C-limber(クライマー)株式会社 新米エンジニアの宮城です。
まだまだ寒い日が続きますが、弊社の社内雑談が面白くて、業務中いつもホンワカしている今日この頃です。今回は、簡単にカレンダー表示のできるflatpickrを紹介したいと思います。
flatpickrとは
- flatpickrは、ライブラリに依存せず、軽量かつ高機能なdate-pickerです。
- 公式サイト
- flatpickrドキュメント翻訳
- GitHub
導入
- 簡単にCDNで読み込むことで、flatpickrを使用することができます。head内に下記を書くだけで、導入は完了です。
-
実際に使用してみよう
- input要素に、任意のidまたはclass名を付けて後はflatpickrで呼び出すだけ！これで簡単にカレンダー表示ができます。（一部Bootstrapを使用しています。）
-
- フォームをクリックするだけで、カレンダー表示されます。
-
年月のみ表示にカスタマイズしてみよう
- head内に下記を追記する。
-
- オプションを追記する。
-
- 簡単に年月のみ表示されました！
-
おまけ
①日本語化
- head内に下記を追記
-
- flatpickrに、日本語化のオプションを追記
-
- 簡単に日本語へ変更できます。
-
②デザインを変更する
- head内に好みのデザインを追記するだけで、簡単にテーマを変更することができます
-
- 好みでカスタマイズして下さいね！
-
③年月のみ表示カレンダーで、開始月・終了月の入力フォームに期間指定の処理を追加する
-
-
- 開始月は2021年12月以降しか選択できず、終了月は2月以降しか選択できないようにカスタマイズできました。
-
- ・minDateオプションは、選択可能な日付の範囲指定のうち、最小(最も早い)日付を指定することができます。 minDateを指定すると、minDate以前の日付を選択することはできなくなります。
- ・monthSelectPluginで月のみを表示するカレンダーを生成することができます。
- ・JavaScriptのDateオブジェクトで、単一の瞬間の時刻をプラットフォームに依存しない形式で取得し、end_month変数へ代入。当月（今月は2月）を取得しdt変数へ代入。dtをminDateへ代入することにより、今月以降しか選択できないようにしています。
Javascript部分の処理
Javascript部分の処理の説明
まとめ
今回は、flatpickrについてまとめてみました。簡単にカレンダーを作成できるので、いろんなオプションを使用して、自分好みにカスタマイズしてみて下さい。
Related article
おすすめ関連記事
