Blog

jQuery uiでフォームにカレンダーを表示する

こんにちは。開発部・アニマル部署統括のPです。

予約システムや予約フォームなどで、ユーザーに日付を選択してもらいたいときなどありますよね。
直接の日付入力やセレクトボックスを選択させる方法もありますが、入力作業が面倒で直感的に操作しずらいものです。

今回は特別なプラグインを使わなくても簡単にカレンダーが実装できる、
「jQuery ui」というライブラリ使った実装方法をご紹介します。

「jQuery ui」はドラッグ移動・カレンダー表示・ダイアログ処理などをサポートしてくれるツールです。

日付を選択


まずはjqeuryとjquery ui を読み込みます。

【html head内】

今回jqueryのバージョンは3.4.1、jquery uiは1.12.1(公式をみても2021/3/24 時点かなり古そうですが、これが最新っぽい^^;)です。

【続いて入力項目の部分です。】

【head内もしくはbodyの閉じタグ直前に以下を記述します。】

基本予約フォームなどでは過去日付を選択させないようにしたいので、
datepickerの呼び出し時に「minDate: 0」を指定。

さらに、
数か月先以降を指定してほしくない場合は(上記の例だと3か月先)「maxDate」で指定できます。

そのほか休業日やスタッフがいない日などを指定したい場合は
「beforeShowDay(カレンダー作成前に呼び出されるメソッド)」で対応不可の日付を入れれば、その日は選択できないようになります。

詳しいオプションなどはhttps://api.jqueryui.com/datepicker/に記載がありますので是非参考にしてみてください。

カレンダーのスタイルなどは
上書き可能なのでお好みの見た目に変更もできますよ!

ではでは~(=゚ω゚)ノ

タグ:css,html,JavaScript

2021.03.24