AquaSunネットサービス ブログ

jQuery は 軽量で高速なJavaScriptライブラリの１つで、利用されている方も相当多いと思います。

JQuery UI プラグインを使うことで、日付入力も Datepicker の専用のダイアログで指定するだけですみます。

しかし、休日表示がないので、ちょっと不便ですよね？

そこで、Kiyoshi Sakaiさんが作成した『祝日（祭日）自動算出ツール JavaScript 版』を使って、Datepicker に祝祭日などを設定してみました。

上の画像はちょうどマウスカーソルを　9/23 秋分の日 に合わせたところです。
どうです？
欲しかった機能ではありませんか？
手順は超〜簡単です　 ＼^o^／



JQuery の本家
JQuery のおすすめ日本語解説リファレンス


JQuery の書籍も充実の
1500円以上　国内送料無料！　ｵﾝﾗｲﾝ書店ﾋﾞｰｹｰﾜﾝ

JQuery UI に付いてくるサンプルソースを元にした手順等は次の通りです。

1.祝日（祭日）自動算出ツール JavaScript 版のスクリプトを jp-holidays.js で保存

2.スタイルシートを定義・・・これが日付の四角枠の色となります
　.days_red {
　　background-color:red;
　}
　.days_blue {
　　background-color:blue;
　}
　.days_black {
　　background-color:black;
　}

3.<script type="text/javascript" src="jp-holidays.js"></script> を追加

4.Datepicker の生成部分に beforeShowDay イベントを追加します
　$('#datepicker').datepicker({
　　inline: true,
　　beforeShowDay: function(date){
　　　var weeks = date.getDay();
　　　var texts = "";
　　　if (weeks == 0)
　　　　texts = "休日";
　　　/* 休日のチェック */
　　　if(date.isJpHoliday()) {
　　　　texts = date.jp_hol_name;
　　　　// description = d.jp_hol_desc;
　　　　weeks = 0;
　　　}
　　　if (weeks == 0)
　　　　return [true, 'days_red', texts];
　　　else if (weeks == 6)
　　　　return [true, 'days_blue'];
　　　return [true, 'days_black'];
　　}
　});


以上です。

意外に簡単な作業で実現できることがわかると思います。


お気に召しましたら、応援のほどよろしくお願いします orz
 

by AquaSunネットサービス | 2009/09/16 16:09:59 | HTML/javascriptなど | comment(2) | trackback(0)