jQuery

【Datepicker】月ごとに選択できる曜日を変更したい

やまだ
こんにちは、山田です。

今回は、jQuery UI Datepickerで月ごとに選択できる曜日を変更したい時のためのメモ。

DatepickerっていうのはjQuery UIのライブラリにある機能の1つで、こんな感じでカレンダーが作れる、とっても便利なニクイ奴です。

便利ではあるんですが、複雑な事をやるにはそれなりにいじらなきゃいけないので、まとめておきます。

スポンサーリンク

月ごとに選択できる曜日を変更する

今回やりたかったのは、カレンダーの設定を

  • 6月までは「土曜日・日曜日」だけ選択可能
  • 7月以降は「月曜・水曜・金曜・土曜・日曜」が選択可能

にするというもの。

曜日の制御は今までやってきたけど、月ごとに変えたりできるんか・・・？としばらく頭を悩ませましたが、そんなに難しくありませんでした。

対処法

beforeShowDayを使う

曜日の制御と言えばbeforeShowDay！

カレンダーが表示される直前に呼び出されるオプションで、ここで返した配列によってカレンダーの日付の選択可否や見た目を変更することができます。

よくカレンダーの土日の色を変えたり、定休日を設定したりするときに使われてますね。

実際に書くとこんな感じ

HTML

<input id="datepicker" name="" type="text" />

jQuery

// getDay() 0:日曜日 1:月曜日 2:火曜日 3:水曜日 4:木曜日 5:金曜日 6:土曜日
$("#datepicker").datepicker({
  beforeShowDay: function (date) {
    if (date.getMonth() + 1 >= 7) {
      var ret = [date.getDay() != 2 && date.getDay() != 4];
      return ret;
    } else {
      var ret = [
        date.getDay() != 1 &&
          date.getDay() != 2 &&
          date.getDay() != 3 &&
          date.getDay() != 4 &&
          date.getDay() != 5,
      ];
      return ret;
    }
  },
});

これで意図したとおりのカレンダーがでるようになりました！

解説

いたってシンプルな仕組みです！

beforeShowDayは曜日以外にも、月を取得することができるので

date.getMonth()+1

でカレンダーの月を取得しています。
※getMonth()は0はじまりでそのままだと月がズレちゃうので+1

んで、その取得した月が7以上、つまり7月以降だったら曜日を変更する！という分岐です。

あとはgetDay()で曜日の設定をして終わり！
※getDay()の説明は割愛します。

まとめ

beforeShowDayを使うといろんな制御ができるので、ここはしっかり押さえておきたいです。

ただ、毎回使う時が来ると忘れるというね…。

この記事が同じような方の役に立つと幸いです。

それでは！

-jQuery