カレンダーを表示する

書式

calendarObj = new JKL.Calendar(calendarID, formID, dateVariable)

calendarObj : カレンダーオブジェクト
calendarID : カレンダーを表示するdivタグのID
formID : フォームタグのID
dateVariable : カレンダーの日付を格納するエレメントのname属性

説明

　カレンダーを表示するにはJKL.Calendar()使います。最初のパラメータにはカレンダーを描画／表示するためのコンテナ (divタグ) のIDを指定します。2番目のパラメータには適用させるフォームのID名を指定します。3番目は実際に日付情報を格納するフォームのエレメントのname属性値を指定します。複数のカレンダーを表示させる場合にはコンテナのIDとエレメントのIDが重複しないようにします。
　最初の時点で日付を設定しておくには以下のサンプルのようにカレンダーオブジェクトのsetFormValue()を使います。

Ajaxライブラリ リファレンス

サンプルコード [実行]

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Sample</title>
<link rel="stylesheet" href="main.css" type="text/css" media="all">
<script type="text/javascript" src="jkl-calendar.js" charset="Shift_JIS"></script>
<script type="text/javascript"><!--
var calendarObj;
window.onload = function ()
{
calendarObj = new JKL.Calendar("calendar","aForm","dateVar");
if ( ! calendarObj.getFormValue() ) calendarObj.setFormValue();
}
// --></script>
</head>
<body>
<h1>カレンダー</h1>
<form id="aForm">
<input type="text" name="dateVar" id="dateVar" onClick="calendarObj.write()"
onChange="calendarObj.getFormValue(); calendarObj.hide();">
</form>
<div id="calendar"></div>
</body>
</html>