カレンダーを入力フォームに表示させてみたかったので調べていたら、 YUIってのがあるらしいので試してみました。 ここ からライブラリーを持ってきて、とりあえず選択した日付をテキストボックスに挿入してみることに。 手元の本によるとbuildってフォルダにjsが全部入ってるらしい。 カレンダーの表示には
<script type="text/JavaScript" src="yahoo.js"></script>
<script type="text/JavaScript" src="event.js"></script>
<script type="text/JavaScript" src="dom.js"></script>
<script type="text/JavaScript" src="calendar.js"></script>の4つのjsが必要らしい。 で、とりあえず作って見ました。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<script type="text/JavaScript" src="./prototype.js"></script>
<script type="text/JavaScript" src="./js/yahoo.js"></script>
<script type="text/JavaScript" src="./js/event.js"></script>
<script type="text/JavaScript" src="./js/dom.js"></script>
<script type="text/JavaScript" src="./js/calendar.js"></script>
<link rel="stylesheet" href="./js/assets/calendar.css" type="text/css" media="all">
<script type="text/JavaScript">
var calObj;
function dateSelected(){
// 選択された日付を取得
var date = calObj.getSelectedDates();
// [date型,date型,date型]こういう配列でくる
var month = date[0].getMonth() + 1;
var day = date[0].getDate();
var dateValue =month + "/" + day;
var obj = $('date');
obj.value = dateValue;
}
function init(){
// カレンダーオブジェクトの生成
calObj = new YAHOO.widget.Calendar("calObj","cal_here",{title:"日付を選択してください"});
// 月と曜日を日本語に
calObj.cfg.setProperty("MONTHS_LONG", ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"]);
calObj.cfg.setProperty("WEEKDAYS_SHORT", ["日","月", "火", "水", "木", "金", "土"]);
// コールバックメソッドの設定
calObj.selectEvent.subscribe(dateSelected, calObj, "ture");
// カレンダー表示
calObj.render();
}
</script>
</head>
<body>
<input name="テキスト" type="text" id="date" >
<input type="submit" value="カレンダーを表示" onClick="init()">
<div id='cal_here'></div>
</body>
</html>
サンプルはこちら
カレンダーサンプル しかしこのままじゃ、いまいち役に立たないなぁ。 ポップアップにするとかいろいろ改良してみたいな、そのうち。 ＊jsが全部ないと動きません。 ＊YUIは2.4.1を使用しました
LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。
