その他

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

[Office用アプリ]ユーザー設定を保存する。前のページ

[Office用アプリ]カレンダーから日付を入力するコンテンツアプリ。次のページ

関連記事

  1. その他

    ブログ引っ越しました。

    今年の2月から無料のWordPress.comでブログを書いていたので…

  2. その他

    【仮面ライダー】DXオーズタジャドルコンボライドウォッチのために並んできました。

    12月22日から平成仮面ライダー20作記念「仮面ライダー平成ジェネレー…

  3. Microsoft Designer

    Microsoft Designerの紹介

    「Microsoft Ignite 2022」で発表されたサービス「M…

  4. その他

    テキスト比較ソフト「ちゃうちゃう!」がバージョンアップされました。

    「ちゃうちゃう Word」といったキーワード検索でのアクセスがありまし…

  5. その他

    【3月のライオン】色紙ARTを買ってみたよ。

    3日に1回は行く近所のイオン。今日もいつものように食玩コーナーをブ…

  6. その他

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

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

コメント

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

Time limit is exhausted. Please reload CAPTCHA.

※本ページはプロモーションが含まれています。

Translate

最近の記事

アーカイブ

PAGE TOP