Web Juice

デイトピッカー 「Datepicker」で、カレンダーの祝日表示、任意の休日のセット、デフォルトの日付等の設定・表示をする

投稿:     更新:2017/11/08

デイトピッカーのカレンダー表示の際、
祝日の設定や、店舗等での任意の休日などをセットして、カレンダーでの祝日表示、任意の休日の日付選択をできないようにしてみます。

日付入力

上記サンプルで動作を確認できます。

1.デイトピッカーの導入と日本語化の準備

Datepickerに必要なjQueryとCSS

・jQuery本体(ワードプレスの場合は必要ありません)
・jQuery UI と jquery-ui.css (ここではCDNを利用)
datepicker-ja.js 日本語化(公式のGitHubリポジトリより取得)
HolidayChk.js 祝日判定JavaScript (リンク先より取得)

2.Datepickerに祝日の取得と、任意の休日をセットできるようオプションに追加する

Datepicker の祝日と休日の設定

以下ソースで、祝日・休日のセット、その他必要な設定を行っています。
※「trueで日付選択可能」「falseで日付選択不可」とある部分の記述を変更することで、日付選択ができるかどうかを決められます。

その他オプション等は、以下で色々確認ができます。
https://jqueryui.com/datepicker/

3.Datepickerのカレンダーの 土・日祝日の色を変更する

CSSを変更することで、表示されるカレンダー曜日や、祝日の日付の色を変更することができます。
※オプションを設定したscriptのソース[false, ‘sunday’]の形式の部分の、sunday の部分がクラスとして追加されます。
以下は、このページで使用しているスタイルです。日付選択可能かどうかにかかわらず、各色を変更するようにしています。

ご参考になれば。

 - jQuery