jQuery UI の Datepicker でカレンダーを月曜始まりにする方法

2017/02/15 ,

jQuery UI を利用してカレンダーによる入力補助機能を提供する Datepicker プラグインですが、オプション設定することでより便利に使いやすくすることができます。

初期設定の状態では、日曜始まりがデフォルトとなりますが、オプション設定によってカレンダーの開始曜日を変更することができます。基本的に月曜始まりに変更する以外は、始まりの曜日を変更する需要は無いと思われますので、今回はカレンダーの設定を月曜始まりにする例を紹介します。

なお jQuery UI の Datepicker の基本的な利用方法については、以前のエントリーを参照ください。

カレンダー表示で日付入力が簡単になる jQuery UI の Datepicker
テキストボックスを選択すると、カレンダーがポップアップ表示し、選択した日付がテキストボックスに反映される仕組みは、一般的な Web アプリケーションや予約サイトで独自...

Datepicker でカレンダーを月曜始まりにする

まずは HTML から。単に ID を指定したテキストボックスです。jQuery で処理するので、id 属性ではなく、class 等を用意しても構いません。

続いて Javascript のコード。カレンダーの開始する曜日を変更するオプションは「firstDay」になります。オプション設定値の詳細については、以下をご覧ください。

オプション内容
firstDayカレンダーの開始の曜日を指定します。
0 : 日曜日 (未設定の場合、こちらが初期値になる)
1 : 月曜日
2 : 火曜日
3 : 水曜日
4 : 木曜日
5 : 金曜日
6 : 土曜日

スクリプト上に記載する場合は、以下のようになります。

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

カレンダーを月曜始まりにするサンプル

日付
↑このテキストボックスをクリックしてください。

簡単ですね。あともう一つ、気付きましたか?土曜日と日曜日の背景色が変わっている点を。こちらは前回、土曜日/日曜日の背景色の変更方法として紹介しましたが、月曜始まりの場合この設定方法では正しく色が付きません。

jQuery UI の Datepicker でカレンダーの土曜日/日曜日の背景色を変える方法
jQuery UI の Datepicker はカレンダー表示してテキストボックスへ日付を設定できる便利なプラグインです。前回は複数月のカレンダーを表示させる方法につ...

Datepicker のカレンダーで月曜始まりの場合の土日の背景色を変更する方法

ポイントは土曜と日曜のセルにだけ ui-datepicker-week-end クラスが設定されている仕様をうまく利用して設定することで対応できます。

それでは実際に月曜日始まりのカレンダーで土日に背景色を設定するスタイルシートのサンプルをご覧ください。

月曜始まりのカレンダーに対する土日の背景色設定

前回の設定では、行単位で「:first-child」と「:lastt-child」の擬似クラスを用いて土日それぞれの背景色を設定しましたが、今回は日曜が最終列となるので「:last-child」しか設定していません。

土曜日のスタイルで ui-datepicker-week-end クラスに対する「:first-child」を設定しても背景色は設定されません。これは擬似クラスはクラスを無視する仕様であるがゆえです。よってここでは、まず最初の土曜日のカラー設定で、土日のセルに設定されている ui-datepicker-week-end クラスのアンカータグ (aタグ) に対し背景色を設定し、続いて日曜のカラー設定を更に上書きする仕組みとしています。

月曜始まりの場合は :last-child の擬似クラスが利用できますが、火曜~金曜始まりとした場合は利用できません。その場合は :first-child に対する隣接セレクタを駆使することで、設定することが可能です。

火曜始まりのカレンダーに対する土日の背景色設定

隣接セレクタ「+」を利用して、最初の td タグ (:first-child) に対する隣の td の隣の……と、繰り返し適切なセルを選択するように仕込みます。具体的な CSS は次の通り。

これで何曜始まりであっても、適切に背景色まで設定することができますね。

以上、Datepicker のカレンダーで指定の曜日から開始にする方法と、それに伴う土日の背景色の設定方法でした。

PAGE TOP ↑