WEBアプリで日付を入力することがありますが、テキストボックスでは入力形式がバラバラになりチェックが複雑になります。
					それを解決するもっとも簡単な方法が、カレンダーを表示し日付をクリックしてテキストボックスなどにセットする入力補助を行う方法です。<br />
					今回、Ajaxを用いたカレンダーの入力補助を行ってくれるライブラリ（protocalendar）をご紹介いたします。<br />
					</div>

					<a id="list2"></a>
					<div class="contents_title">使い方</div>
					<div class="contents_sentense">
					GoogleCodeからライブラリ(protocalendar)を<a href="http://code.google.com/p/protocalendar/downloads/list" target="_blank">ダウンロード</a>し、
					ライブラリをサーバに展開して配置します。
					<br />
					カレンダーを表示するページのheadタグ内に下記の内容を追加します。<br/>(パスは各環境に合わせて変更してください。)
<pre>
&lt;link href="../css/simple.css" rel="Stylesheet" type="text/css" /&gt;
&lt;script src="../lib/prototype.js" type="text/javascript"&gt;&lt;/script&gt;
&lt;script src="../lib/effects.js" type="text/javascript"&gt;&lt;/script&gt;
&lt;script src="../javascripts/protocalendar.js" type="text/javascript"&gt;&lt;/script&gt;
&lt;script src="../javascripts/lang_ja.js" type="text/javascript"&gt;&lt;/script&gt;
&lt;script src="../javascripts/lang_zh-cn.js" type="text/javascript"&gt;&lt;/script&gt;
&lt;script src="../javascripts/lang_zh-tw.js" type="text/javascript"&gt;&lt;/script&gt;
</pre>
					</div>

					<div class="contents_title">使い方（テキストボックスへの入力補助）</div>
					<div class="contents_sentense">
					例：カレンダーで選択した日付をテキストボックスにyyyy-mm-dd形式で反映する。

<pre>
&lt;div class="sample-code"&gt;
&lt;input id="dateformat_calendar" name="dateformat_calendar" type="text" /&gt;
&lt;script type="text/javascript"&gt;
  InputCalendar.createOnLoaded('dateformat_calendar',
                               {format     : 'yyyy-mm-dd',
                                labelEl    : '',
                                labelFormat: ''});
&lt;/script&gt;
&lt;/div&gt;
</pre>

InputCalendar.createOnLoadedメソッドの引数<br />
第１引数：固定<br />
第２引数(format)：表示形式(yyyy-mm-dd、yyyy/mm/dd等)<br />

					</div>

					<div class="contents_title">使い方（セレクトボックスへの入力補助）</div>
					<div class="contents_sentense">
					例：カレンダーで選択した日付をセレクトボックスに反映する。

<pre>
&lt;select id="yy" name="year"&gt;&lt;/select&gt;年
&lt;select id="mm" name="month"&gt;&lt;/select&gt;月
&lt;select id="dd" name="day"&gt;&lt;/select&gt;日
&lt;input type="button" value="カレンダー" id="select_date_calendar_icon"/&gt;
&lt;div class="sample-code"&gt;
&lt;script type="text/javascript"&gt;
  SelectCalendar.createOnLoaded({yearSelect : 'yy',
                                 monthSelect: 'mm',
                                 daySelect  : 'dd'
                                },
                                {startYear  : 1910,
                                 endYear    : 2010,
                                 lang       : 'ja',
                                 triggers   : ['select_date_calendar_icon']
                                });
&lt;/script&gt;
&lt;/div&gt;
</pre>

SelectCalendar.createOnLoadedメソッドの引数<br />
第１引数(yearSelect)：　年をセットする名前(selectタグのid属性)<br />
第１引数(monthSelect)：　月をセットする名前(selectタグのid属性)<br />
第１引数(daySelect)：　日をセットする名前(selectタグのid属性)<br />
<br />
第２引数(startYear)：カレンダーに表示する開始年<br />
第２引数(endYear)：カレンダーに表示する終了年<br />