説明
タグで指定します。
プログラムではYAHOO.widget.Calendar()としてカレンダーオブジェクトを生成します。カレンダーの表示はrender()で行います。 カレンダー上の日付が選択された場合に日付をページ上に表示するにはselectEvent.subscribe()として選択時のイベントを設定します。イベントハンドラには選択された日付が渡されるので、これを整形してページ上に表示します。
Yahoo UIライブラリが用意しているカレンダーには、同時に2ヶ月分表示できるデュアルカレンダーもあります。
プログラムではYAHOO.widget.Calendar()としてカレンダーオブジェクトを生成します。カレンダーの表示はrender()で行います。 カレンダー上の日付が選択された場合に日付をページ上に表示するにはselectEvent.subscribe()として選択時のイベントを設定します。イベントハンドラには選択された日付が渡されるので、これを整形してページ上に表示します。
Yahoo UIライブラリが用意しているカレンダーには、同時に2ヶ月分表示できるデュアルカレンダーもあります。
サンプルコード [実行]
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>JavaScript Sample</title>
<link rel="stylesheet" href="css/calendar.css" type="text/css" media="all">
<link rel="stylesheet" type="text/css" href="main.css" media="all">
<script type="text/javascript" src="yahoo.js"></script>
<script type="text/javascript" src="dom.js"></script>
<script type="text/javascript" src="event.js"></script>
<script type="text/javascript" src="calendar.js"></script>
<script type="text/javascript" src="main.js"></script>
</head>
<body>
<h1>カレンダーを表示する</h1>
<div id="result"></div>
<div id="myCalendar"></div>
</body>
</html>
window.onload = function(){
var myCalendar = new YAHOO.widget.Calendar("cal", "myCalendar");
myCalendar.render();
myCalendar.selectEvent.subscribe(function(eventName, selectDate){
var y = new String(selectDate).split(",")[0];
var m = new String(selectDate).split(",")[1];
var d = new String(selectDate).split(",")[2];
document.getElementById("result").innerHTML = "選択された日付："+y+"年"+m+"月"+d+"日";
}, myCalendar, true);
}