5.2. カレンダー
この章では、JavaScript UI コンポーネントを使用し、ポップアップカレンダーを組み込む手順について説明します。
JavaScript ファイルを読み込む
HTMLテンプレートのHEAD部にて、JavaScriptファイル「 calendar.js 」を読み込みます。
※本コンポーネントを使用する際は、「 prototype.js 」が必須です。
<head>
  <!-- prototype.jsの読み込み -->
  <script language="javascript" type="text/javascript"
            src="js/prototype/prototype_1_6_0.js"></script>
  <!-- calendar.jsの読み込み -->
  <script type="text/javascript" src="ls/calendar.js"></script>
</head>
画面表示時のオブジェクト作成処理を記述する
HTML テンプレート の BODY 部の最後で、カレンダーオブジェクトの作成処理を行います。
<body>
  …
  <script type="text/javascript"><!--
      // カレンダーオブジェクトを生成
      cal = new ls.Calendar('inpArea00', {startDay:0'});
  // --></script>
</body>

作成処理

画面のロード時に、「 ls.Calendar 」オブジェクトを作成します。
第 1 パラメータにはカレンダーを表示させる(選択した日付を反映させる) INPUT タグの ID を指定します。
第 2 パラメータでは連想配列で、以下の内容を指定します。
  • startDay：開始曜日を指定します。（ 0 :日～ 6 :土）
カレンダーは、パラメータで指定した INPUT タグの真下に表示されます。
(ブラウザの表示領域が小さい場合は上に表示されます。)
カレンダー表示処理を記述する
作成したカレンダーオブジェクトの「 open 」メソッドにて、カレンダーを表示します。
<td>
  <input type="text" name="inpArea00" />
  <img src="ls/i/cal.gif" onclick="cal.open('inpArea00');" />
</td>

表示処理(「 open 」メソッド)

第 1 パラメータにはカレンダーを表示させる(選択した日付を反映させる) INPUT タグの ID を指定します。
※パラメータの指定がない場合は、オブジェクト作成時に指定した内容を使用します。
ページを表示する
カレンダーの表示、選択日付の反映が行えることを確認します。