その他

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. Office関連

    オデッセイ コミュニケーションズ主催のWord活用無料セミナーに参加しました。

    Club Microsoft会員限定、オデッセイ コミュニケーションズ…

  2. その他

    Microsoft Speech Platform Version 11が公開されました。

    今月1日、Microsoft Speech Platform Vers…

  3. その他

    サーバーを移転しました。

    これまで使っていたレンタルサーバー、XREA Plusがあまりに遅いの…

  4. Windows 10

    Windows Application Driverを試してみました。

    Build 2016のセッション「UI Test Automation…

  5. Office アドイン

    Live Serverとmkcertで簡単にローカルhttpsサーバーを立ち上げる方法

    Office アドインのテストを行うのに、簡単に構築できるhttpsサ…

  6. その他

    Microsoft製まとめサイト!?「Curah!」の紹介

    Microsoftの開発者部門副社長である S. Somasegar …

コメント

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

Time limit is exhausted. Please reload CAPTCHA.

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

Translate

最近の記事

アーカイブ

PAGE TOP