2015-09-14  2020-10-11

jQuery UI datepicker 用の祝祭日ツールチップ表示

日付選択ダイアログ datepicker に日本の祝祭日のツールチップを表示させる jquery プラグインです。

jquery.holiday.js 2020-10-11 α版

Download

祝祭日のデフォルト表示

サンプル

ソース

 

※おなじみの datepicker に .holiday() を加えるだけ。

祝祭日のオプション指定

サンプル


↑クリックで datepicker 表示。

ソース

 

祝祭日のカスタマイズ

祝祭日の日付を通年の月日や第n月曜日で指定したり、個別の西暦年月日で指定したり、祝祭日の名称を指定することができます。

ソース

 

日本の祝祭日の英語版カスタマイズ例

(jquery.holiday_en-JP.js)

サンプル

ソース

日付入力欄の動的な追加に対応

サンプル

↑クリックで datepicker 表示。
日付入力で行追加。

ソース

 

 

※動的に生成されたinput要素に対してもdatepicker()とholiday()を設定。
 このとき同じinput要素に対して重複してholiday()が実行される問題を回避。

備考

プログラムについて

  • 2007年以降から2015年現在の祝祭日に対応しました。
     「山の日(2016年以降の8月11日)」
  • 2016年以降から2020年10月現在の祝祭日に対応しました。
     「天皇誕生日(2020年以降の2月23日)」
     オリンピックによる2020年の特例の「山の日」「スポーツの日」「海の日」に対応しました。
     ご指摘ありがとうございました。
  • 確認ブラウザ Chrome 86.0.4240.75 FireFox 80.0.1 IE11 1082.18362.0 (Windows 10)
  • 改造、再配布、商用利用など自由に使っていただけます。
  • お気づきの点その他ありましたらお知らせください。

更新履歴

2015-12-22
祝祭日カスタマイズ例(日本語版)の追加
2016-10-22
動的なinput要素の追加に対応
2020-10-11
年間の祝祭日データに対象年の範囲を指定できるよう修正
2020-10-11
現時点の内閣府「国民の祝日」に対応