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さんが 機能アップバージョン を提供されていますので、そちらもお試し下さい。

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

日付を選択:

使い方

まず、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() コンストラクタを呼び出し、以下の紐付けを行っています。

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() で指定できる項目は以下の通りです。

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

デフォルトでは、日付を選択するとポップアップのカレンダーはスグに消えますが、 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>

更新履歴

コメントはこちらへ by AjaxCom

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

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

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

Kawa.netxp © Copyright 2002-2006 Yusuke Kawasaki