安達司法書士.comブログ:カレンダーによる日付入力 - livedoor Blog(ブログ)

2007年03月12日

カレンダーによる日付入力


今更ですが、私は、このブログと共にホームページを運営しています。ホームページでは、登記手続を行なう際に少しでもお役に立てればと考えて、書式や便利ツールをアップしています。その便利ツールの一つに、公告期間満了日を自動計算するフォームがあります。このフォームでは、ポップアップカレンダーを公告掲載日の入力補助に使用していますが、これに今ひとつ満足できずにおり、とにかくもう少し見栄えのするカレンダーはないものかとWebサイトを検索していたところ、川崎有亮さんのJKL.Calendarがヒットし、そこから、MOMさんのJKL.Calendarの機能アップバージョンに辿り着きました。

JKL.Calendarは、落ち着いた色使いで見やすく、機能の面でもある一点を除いて十分に満足できるものです。その一点とは、祝日表示に対応していないことです。祝日設定可能なJKL.Calendar改造版も公開されていますが、こちらは祝日の自動判定機能を有しておらず、祝日を個別に設定しなければなりません。そこで、MOMさんのJKL.Calendarを祝日表示に対応すべく、角田 桂一 さんが公開されている「祝日判定コード」とコラボさせていただきました。これで、祝日の文字の色は日曜日と同じ色となり、当該日付にマウスを当てると祝日名が表示されるようになりました(画像参照)。なお、3月21日のセルの背景色が変わっているのは祝日対応によるものではなく、その日にマウスを当てたことによるものであって、これはJKL.Calendarの本来の機能です。

祝日対応改良の仕方
  1. MOMさんのjkl-calendar_20070204.js、角田 桂一 さんのHolidayChk.jsをそれぞれダウンロード
  2. JKL.Calendarのコードの書き換え(赤字部分追記)
    // ======================================================
    // jkl-calendar.js ---- ポップアップカレンダー表示クラス

      記述の中程へ↓↓

    //2006.11.23 MOM 今日日付を取得し、時分秒を切り捨てる

      ↓↓

    */

    var cc = days_td_style;
    var utc = dd.getTime();
    //2007.03.12 祝日判定追加
    var tt = dd.getDate();
    var std = year+"/"+(mm+1)+"/"+tt;
    var getholiday = ktHolidayName(std);
    // 2007.03.25 1月と12月頁の当月外の祝日判定バグを修正
    var ss = this.getDateYMD(dd);
    var getholiday = ktHolidayName(ss);


    if ( mon == mm ) {
    //2006.11.23 MOM 最初に今日日付かどうかをチェックする
    //※当月でない場合にも色変えると選択できそうに見えて紛らわしいので、…
    if ( utc == realutc ){
    cc += "color: "+this.style.today_color+";"; // 今日日付
    }
    //2007.03.12 祝日の色を変更
    if ( ww == 0 || getholiday != "" ){
    cc += "color: "+this.style.sunday_color+";"; // 当月の日曜日・祝日

      ↓↓

    //2006.11.23 MOM 枠線描画を追加

      ↓↓

    //2007.03.12 祝日名をタイトルに追加
    src1 += '<td style="'+cc+'" title="'+ss+''+getholiday+'" id="__'+this.eid+'_td_'+ss+'">'+tt+'</td>';
  3. HTML<head>〜</head>に下記のとおり記述
    <head>
    <script src="jkl-calendar_20070204.js" language="javascript"></script>
    <script src="HolidayChk.js" language="javascript"></script>
    </head>
  4. HTML<body>〜</body>はJKL.Calendarの仕様どおり
  5. IE6.0以上、Firefox1.5以上で、動作確認をしています。
    サンプルをご覧になるにはこちら
  6. JKL.Calendar・祝日判定コードのお問い合せについては、一切お答えできませんのでご了承ください。


2007年03月27日追記


本文で紹介したJKL.Calendar祝日対応版の更なる機能アップを実現すべく、joaoさんのJKL.Calendar改造版の一部機能とコラボさせていただきました。
これにより、
  • 休業日等の特別な休日の個別設定
  • 曜日ごと、祝日、特別な休日それぞれの選択可否設定
  • カレンダーの固定表示
が可能になりました。

JKL.Calendar祝日対応改造版のソースを公開しますので、アイコンをクリックし、ダウンロードしてご利用ください。ただし、設置を含めサポートは一切行ないませんのでご了承ください。
設置例をご覧になるにはこちら


記事の内容(画)が良かった!と思われたら、バナークリックをお願いします...
人気ブログランキング
書式の無償ダウンロード・便利ツールのご利用はホームページ

トラックバックURL

この記事へのコメント

1. Posted by ビジログ   2007年03月20日 21:20
はじめまして。突然のコメントで失礼します。
司法書士にまつわるリンク集を管理しております
ビジログと申します。
貴サイトを拝見致しまして、
当方のブログ
「司法書士のお仕事♪」
(http://job-jus.busilog.com/)
にリンクを設定させていただきました。
今後ともよろしくお願いします。

コメント有難うございます。
よろしくお願いしますm(__)m
      --安達司法書士--
2. Posted by AddinBox(角田)   2011年03月20日 13:21
2011/3/20に祝日判定スクリプトを更新しました。

FireFox特有のバグによって、ループ内のswitchステートメントが誤動作(FireFoxによるコンパイルミス)する場合がありますので、[if-else]構造に修正しました。
IE,Opera等の他ブラウザでは修正前スクリプトでも問題ありません。
幸いな事に1ヶ月(31回)程度のループでは障害が発現しませんので、修正前のスクリプトを使ってもFireFox上で正しく判定されていますが、祝日スクリプトを最新版に差し替える事をお勧めします。
詳細は下記を参照してください。
http://www.h3.dion.ne.jp/~sakatsu/Excel_Tips06.htm#JS_CalForm2

角田 さん
お世話になっております。
お知らせいただき有難うございます。
早速差し替えさせていただきました。
今後ともよろしくお願いいたします。
   ---安達司法書士---

この記事にコメントする

名前:
URL:
  情報を記憶: 評価: 顔