jQuery UI Datepicker の便利機能を一気にまとめて一括定義する方法

2017/02/15 ,

jQuery UI のカレンダーによる日付入力補助機能を実現する Datepicker プラグインは、初期状態のままでは利便性が低いため、オプションにより使い勝手を良くする方法をこれまで紹介してきました。

今回はまとめとして、これまで紹介した機能を全て取り入れて、一括で事前にオプション定義をする方法を紹介します。

オプションを事前定義して全ての Datepicker に適用する

プラグインが保持しているオプション値は、それぞれ初期値が定義されています。その値を予め書き換えてあげることで、全ての Datepicker プラグイン処理に対して変更値が適用されるようになります。例として次のように数多くの日付入力項目がある場合に、全て同じオプション設定が適用されるようにします。

重要なのは Javascript の設定です。.setDefaults() を用いて、事前にオプション値を定義すれば、全ての Datepicker に対し適用させることができるようになります。

複数月表示と年月のプルダウン化を組み合わせた場合、現在の月の位置を動かすとおかしな動きになるため、showCurrentAtPos のオプション値を 0 にしています。

あとは微調整と、土日の背景色を変えるためのスタイルシートを噛ませます。サイズ調整は必ずしも必要ではないので、環境に合わせて適宜修正するようにしてください。

それでは実際に動作を確認してみましょう。

オプション事前定義による一括設定のサンプル

期間1
期間2
期間3
期間4
期間5

便利だからと言って、なんでもかんでも差し込んでしまうと、逆に使いづらいと意見するユーザーも中にはいます。入力項目の目的に応じて適材適所のオプションを設定することが、ユーザーにとってもシステム管理者にとっても利点は大きいです。

とは言え、システム全体を通して、カレンダーの表示内容が画面によって異なるのも、ユーザーを迷わせる要因になるため、一概にどれが正解か述べるのは難しいです。管理する立場から考えると、全てルールが統一されている方が望ましいのは確かなので、システム共通の仕組みとして上手く折り合いが付くところで調整するのがベターなのかもしれませんね。

以上、jQuery UI の Datepicker プラグインにおける便利機能を一気にまとめて一括定義する方法でした。

PAGE TOP ↑