その他

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

関連記事

  1. その他

    Windows Azure MSDN 特典をアクティブ化しました。

    MSDN サブスクリプションの特典でWindows Azureが使える…

  2. その他

    TypeLibraryから列挙型の情報を取得するC#コード

    Excel Q&Aサロンに「列挙型の一覧データを取得したい」との質問が…

  3. その他

    2016年ブログ振り返り(前半戦)

    2016年、今年も無事に仕事納め完了。年明けまで会社に行くこともな…

  4. その他

    Photoshop CSのライセンス認証問題

    今更ながらに、10年ほど前に発売された「Photoshop CS」をイ…

  5. その他

    Android版Kindleでダウンロードした本をSDカードに保存できるようになっていた。

    スマホで大量のマンガ技術書を読むのにKindleアプリを愛用しているの…

  6. Office関連

    「NetOffice」で簡単に.NETからOfficeを操作

    ネットで「NetOffice」なるツールがあることを知ったので、早速試…

コメント

  1. この記事へのコメントはありません。

Time limit is exhausted. Please reload CAPTCHA.

最近の記事

アーカイブ

RapidSSL_SEAL-90x50
PAGE TOP