その他

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. その他

    CodePlex Archiveからのファイルの取り出し方

    数年前まで稼働していた、Microsoftのホスティングサービス「Co…

  2. その他

    mougの過去ログ検索サイト「mougle」を開設しました。

    2014/07/24 追記:mougleのデータベース更新とドメイ…

  3. その他

    「駅すぱあとWebサービス API無償提供」を利用してみました。

    経路探索サービスとして有名な株式会社ヴァル研究所の「駅すぱあと」ですが…

  4. Office関連

    オデッセイ コミュニケーションズ主催のExcel VBA入門セミナーに参加しました。

    今月19日に開催されたオデッセイ コミュニケーションズさん主催の「Ex…

  5. その他

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

    前回の記事に引き続き、今年書いた記事の振り返りです。2016年…

  6. その他

    HTML5の構文チェックを行う「Validator.nu (X)HTML5 Validator」のW…

    HTML5の構文チェックをしてくれる「Validator.nu (X)…

コメント

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

Time limit is exhausted. Please reload CAPTCHA.

最近の記事

アーカイブ

RapidSSL_SEAL-90x50
PAGE TOP