JavaScriptでカレンダー表示して日付選択を補助する機能

JavaScript・・・というかjQueryを利用して、
カレンダーを表示して日付選択を補助する機能は、いろいろ試したが、

YahooCal.js

でほぼ決まりだと思う。

使い方は
http://developer.yahoo.com/yui/calendar/index.html
で一式ダウンロードし、サーバに配置して、

HTML上のヘッダ部で

<script language="JavaScript" src="js/jquery.js"></script>
<script language="JavaScript" src="js/YahhoCal.js"></script>
<script language="JavaScript">
<!--
YahhoCal.loadYUI('js/yui/build/');
//-->
</script>


そしてカレンダーを出力したい場所などに

<select name="year1" id="year1">
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
・・・
</select>

これを月、日にも同じように
select name="month1" id="month1"
select name="day1" id="day1"

も作り、

その隣にボタンでも用意して

<input type="button" value="カレンダー" onclick="YahhoCal.render('year1', 'month1', 'day1');" />


とやれば、ボタンを押すとカレンダーが現れて、選択完了すると、
id="year1"
id="month1"
id="day1"
の場所にしっかり値とともに入る。超便利。


コメントをどうぞ