WEBアプリで日付を入力することがありますが、テキストボックスでは入力形式がバラバラになりチェックが複雑になります。 それを解決するもっとも簡単な方法が、カレンダーを表示し日付をクリックしてテキストボックスなどにセットする入力補助を行う方法です。
今回、Ajaxを用いたカレンダーの入力補助を行ってくれるライブラリ(protocalendar)をご紹介いたします。
使い方
GoogleCodeからライブラリ(protocalendar)をダウンロードし、 ライブラリをサーバに展開して配置します。
カレンダーを表示するページのheadタグ内に下記の内容を追加します。
(パスは各環境に合わせて変更してください。)
<link href="../css/simple.css" rel="Stylesheet" type="text/css" />
<script src="../lib/prototype.js" type="text/javascript"></script>
<script src="../lib/effects.js" type="text/javascript"></script>
<script src="../javascripts/protocalendar.js" type="text/javascript"></script>
<script src="../javascripts/lang_ja.js" type="text/javascript"></script>
<script src="../javascripts/lang_zh-cn.js" type="text/javascript"></script>
<script src="../javascripts/lang_zh-tw.js" type="text/javascript"></script>
使い方(テキストボックスへの入力補助)
例:カレンダーで選択した日付をテキストボックスにyyyy-mm-dd形式で反映する。
<div class="sample-code">
<input id="dateformat_calendar" name="dateformat_calendar" type="text" />
<script type="text/javascript">
  InputCalendar.createOnLoaded('dateformat_calendar',
                               {format     : 'yyyy-mm-dd',
                                labelEl    : '',
                                labelFormat: ''});
</script>
</div>
InputCalendar.createOnLoadedメソッドの引数
第1引数:固定
第2引数(format):表示形式(yyyy-mm-dd、yyyy/mm/dd等)
使い方(セレクトボックスへの入力補助)
例:カレンダーで選択した日付をセレクトボックスに反映する。
<select id="yy" name="year"></select>年
<select id="mm" name="month"></select>月
<select id="dd" name="day"></select>日
<input type="button" value="カレンダー" id="select_date_calendar_icon"/>
<div class="sample-code">
<script type="text/javascript">
  SelectCalendar.createOnLoaded({yearSelect : 'yy',
                                 monthSelect: 'mm',
                                 daySelect  : 'dd'
                                },
                                {startYear  : 1910,
                                 endYear    : 2010,
                                 lang       : 'ja',
                                 triggers   : ['select_date_calendar_icon']
                                });
</script>
</div>
SelectCalendar.createOnLoadedメソッドの引数
第1引数(yearSelect): 年をセットする名前(selectタグのid属性)
第1引数(monthSelect): 月をセットする名前(selectタグのid属性)
第1引数(daySelect): 日をセットする名前(selectタグのid属性)

第2引数(startYear):カレンダーに表示する開始年
第2引数(endYear):カレンダーに表示する終了年