jQuery UIのDatepickerに祝日判定ロジックを組み込む。

ホーム
その他
jQuery UIのDatepickerに祝日判定ロジックを組み込む。

2012.08.14

jQuery UIのDatepickerに祝日判定ロジックを組み込む。

jQuery UIにはWebシステムで簡単に日付選択ができるようになる「Datepicker」が用意されていますが、標準では日本の祝日の色分けが行えません。
そこで今回はこのDatepickerにExcel MVPの角田さん作の「日本の祝日判定ロジック」を組み込んでみます。

2012/08/14 追記：
下記コードをOffice用アプリに組み込んだのが「[JavaScript API for Office]カレンダーから日付を入力するコンテンツアプリ。」になります。

※ JavaScript 用祝日判定コード(HolidayChk.js)は角田さんのHPからダウンロードして、自分の環境に合わせて文字コードを変更してください。
※ HolidayChk.jsを利用する際は「AddinBox(祝日マクロ-1)」にある使用条件に従ってください。また、ファイルは必ず最新版を使用するようにしてください。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=Edge">
        <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/dot-luv/jquery-ui.css">
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/jquery-ui.min.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/i18n/jquery.ui.datepicker-ja.min.js"></script>
        <script src="HolidayChk.js"></script>
        <script>
            $(function(){
                $("#datepicker").datepicker({
                    beforeShowDay: function(date) {
                        var result;
                        var dd = date.getFullYear() + "/" + (date.getMonth() + 1) + "/" + date.getDate();
                        var hName = ktHolidayName(dd);
                        if(hName != "") {
                            result = [true, "date-holiday", hName];
                        } else {
                            switch (date.getDay()) {
                                case 0: //日曜日
                                    result = [true, "date-holiday"];
                                    break;
                                case 6: //土曜日
                                    result = [true, "date-saturday"];
                                    break;
                                default:
                                    result = [true];
                                    break;
                            }
                        }
                        return result;
                    },
                    onSelect: function(dateText, inst) {
                        alert(dateText);
                    }
                });
            });
        </script>
        <style>
            .date-holiday .ui-state-default {
                background-image:none;
                background-color:#FF9999;
            }
            .date-saturday .ui-state-default {
                background-image:none;
                background-color:#66CCFF;
            }
            body {
                margin:0;
                padding:0;
                font-family:Arial,sans-serif;
                font-size:0.8em;
            }
        </style>
    </head>
    <body>
        <div id="datepicker"></div>
    </body>
</html>

※ 実際のサンプルは下記になります(見やすいようにスタイルは変更してあります)。ブログの仕様上IEだと表示できないかもしれません。

仕組みとしては、DatepickerのbeforeShowDayイベントを使って、日付が表示される前に土日祝日判定を行いスタイルを適応しているわけですが、上記コードの通りDatepickerと角田さんのロジックとは非常に相性が良いので、ほんの数行コードを追加するだけで祝日の色分けができるようになります。

日付と言えば角田さん角田さんと言えば日付、というくらい日付処理に関して造詣が深い角田さん。
非常に便利なロジックを公開していただき、本当にありがとうございます。

ちなみに、上記コードでは(面倒臭いので)スタイルシートとスクリプトファイルをGoogleから読み込むようにしていますが、このスタイルは簡単に変更することができます。
詳しくは下記Webページにある「jQuery UIのデザインを決める」をご参照ください。

・jQuery UIのDatepickerでカレンダーから楽々日付入力
http://www.hanemaru.com/itemcolumn/11jquidatepicker01.html