Kawa.netxp [JavaScript] JKL.Calendar／ポップアップするカレンダー表示クラス

JKL.Calendar は、ポップアップでカレンダー表示を行うクラスです。

2006年10月にクラス名を変更しましたが、2005年4月のリリース当初のクラス名 JKL.Calender も
別名定義してあるので、こちらも利用可能です。半年前にご指摘いただいた typo でした。
合わせて、選択可能な日付範囲指定用のプロパティ min_date／max_date を追加しました。

Yahoo! UI ライブラリのカレンダー機能がかなり強力なので、最近なら YUI もオススメできそうですが、
実は JKL.Calendar の方が日本語環境では使いやすかったりするかもしれません。

JavaScript ソースのダウンロードはこちら： jkl-calendar.js JavaScript
（右クリックして［対象をファイルに保存］を選択）

※MOMさんが機能アップバージョンを提供されていますので、そちらもお試し下さい。

以下のようなフォームで利用します。（入力欄をクリックしてみてください）

日付を選択：

使い方
複数のカレンダーを利用する場合
表示スタイルのカスタマイズ
日付選択時のフェードアウト
選択可能日付範囲の指定
更新履歴
1行コメント
トラックバック

使い方

まず、HTML ヘッダ内で jkl-calendar.js を呼び出します。

<head>
<script type="text/javascript" src="jkl-calendar.js" charset="Shift_JIS"></script>
</head>

次に、ページ中の任意の位置に、下記のスクリプトを埋め込みます。

<script><--
    var cal1 = new JKL.Calendar("calid","formid","colname");
//--></script>

1行目で new JKL.Calendar() コンストラクタを呼び出し、以下の紐付けを行っています。

calid … カレンダー表示用の div 要素のid
formid … 日付格納用テキスト欄の form 要素のid
colname … 日付格納用テキスト欄の変数名

setFormValue() メソッドでは、デフォルト値として今日の日付を自動入力しています。
最後に、日付入力のフォーム中に以下のような onClick・onChange イベントを追加してください。

<form id="formid" action="">
	日付を選択：
    <input type="text" name="colname" onClick="cal1.write();" 
        onChange="cal1.getFormValue(); cal1.hide();"><br>
    <div id="calid"></div>
</form>

onClick="" イベントにより、マウスクリックでカレンダーをポップアップ表示します。

複数のカレンダーを利用する場合

複数の入力欄を利用することも可能です。
以下のように複数の JKL.Calendar オブジェクトを利用します。
カレンダー挿入用の div 要素の id も、カブらないように分けてください。
区別しやすいように、setStyle() でカレンダーのフレームの色を変えています。
また、onClick で片方のカレンダーを開くときには、hide() で他方を閉じます。

日付範囲を選択：
～

<script><--
    var cal2 = new JKL.Calendar("caldiv2","formid","start_date");
    cal2.setStyle( "frame_color", "#3333CC" );
    var cal3 = new JKL.Calendar("caldiv3","formid","last_date");
    cal3.setStyle( "frame_color", "#CC3333" );
//--></script>
<table><tr>
    <td>日付範囲を選択：</td>
    <td><input type="text" name="start_date" onClick="cal3.hide(); cal2.write();" 
        onChange="cal2.getFormValue(); cal2.hide();"><br><div id="caldiv2"></div></td>
    <td>～</td>
    <td><input type="text" name="last_date" onClick="cal2.hide(); cal3.write();" 
        onChange="cal3.getFormValue(); cal3.hide();"><br><div id="caldiv3"></div></td>
</tr></table>

表示スタイルのカスタマイズ

JKL.Calendar でポップアップ表示されるカレンダーの色などはカスタマイズできます。

    cal3.setStyle( "項目名", "値" );

setStyle() で指定できる項目は以下の通りです。

font_size ⇒ 文字サイズ（デフォルト：12px）
frame_width ⇒ カレンダーの大きさ（デフォルト：150px）
frame_color ⇒ カレンダーのフレームの色
day_bgcolor ⇒ 日付表示欄の背景色
month_color ⇒「○年○月」表示部の文字色
month_hover_color ⇒ 前の月・次の月へのボタン選択中の文字色
month_hover_bgcolor ⇒ 前の月・次の月へのボタン選択中の背景色
weekday_color ⇒ 日付表示欄の月曜～金曜の文字色
saturday_color ⇒ 日付表示欄の土曜の文字色
sunday_color ⇒ 日付表示欄の日曜の文字色
others_color ⇒ 日付表示欄の他の月の日の文字色
day_hover_bgcolor ⇒ 日付表示欄の日付選択中の背景色

日付選択時のフェードアウト

デフォルトでは、日付を選択するとポップアップのカレンダーはスグに消えますが、 JKL.Calendar クラスだけえなく JKL.Opacity クラスが存在する場合は日付選択後にカレンダー部分のフェードアウト表示を行います。
（ポップアップが半透明になって消えて行くのがお気に入り！）

<head>
<script type="text/javascript" src="jkl-calendar.js" charset="Shift_JIS"></script>
<script type="text/javascript" src="jkl-opacity.js" charset="Shift_JIS"></script>
</head>

このフェードアウトを利用する手順は簡単で、 jkl-calendar.js に加えて jkl-opacity.js
を呼び出しておくだけでOKです。
このページのポップアップカレンダーもフェードアウトを利用しています。

選択可能日付範囲の指定

デフォルトでは、任意の日付を選択できます。
○月○日～△月△日から選択させたい場合は、min_date プロパティに選択可能な最初の日付、 max_date プロパティに最後の日付をDate オブジェクトで指定してください。 new Date() の引数に "年/月/日" の形式で指定します。

日付を選択：　（範囲指定あり）

<script><!--
    var cal4 = new JKL.Calendar("calid","formid","colname");
    cal4.min_date = new Date( "2006/10/09" );
    cal4.max_date = new Date( "2006/11/12" );
//--></script>

min_date・max_date を指定しない場合は制限はかかりません。
片方の値のみを指定することもできますので、 new Date() で現在の日付を生成して max_date に指定すれば、今日以降の日付のみを選択可能なフォームになります。

日付選択：　（今日以降のみ）

<script><!--
    var cal5 = new JKL.Calendar("calid","formid","colname");
    cal5.min_date = new Date();
//--></script>

更新履歴

2006/10/26 (version 0.13)
- min_date～max_date の有効範囲バグ再修正
2006/10/24 (version 0.12)
- max_date の有効範囲バグ修正（thanks to 古籏さん）
2006/10/23 (version 0.11)
- prototype.js が読み込まれている場合は、Event.observe() を利用してます。
  （これで IE のメモリリークを回避できるのかな）
2006/10/22 (version 0.10)
- JKL.Calender という typo なクラス名を、JKL.Calendar に変更しました。
  もとの JKL.Calender のクラスも別名定義してあるので、今後もそのまま利用可能です。
- 選択可能日付範囲を指定する min_date・max_date プロパティを追加しました。
- Code hourから、
      ・閉じるボタンの追加
      ・すでにフォームに値がある場合、その日付をハイライト
      ・日付の区切り文字を変更できるように対応　（spliterプロパティ）
  の変更点と一部のソースをマージさせていただきました。
2006/03/03
- 『文字列なので、有効範囲は0～11ではなく1～12が正解』のバグをご指摘いただいたので修正。
  どうりで去年の12月頃にカレンダー表示の動作がおかしいと思っていたら……。失礼しました！
2005/04/10
- このページを作成しました。

コメントはこちらへ by AjaxCom

その他のページへのリンク

このページへのトラックバック by AjaxTB

トラックバックURL：http://www.kawa.net/service/tb/ajaxtb.cgi/works/js/jkl/calender.html