Calandarコントロールを使うサンプル
Yahoo! UI Library : calendarを使ってカレンダーの表示と選択された日を取得するサンプルです。
- 必要なソースを取り込んで、
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.6.0/build/calendar/assets/skins/sam/calendar.css"> <script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/yahoo-dom-event/yahoo-dom-event.js"></script> <script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/calendar/calendar-min.js"></script>
- 「YAHOO.widget.Calendar」をnewし、「render()」メソッドを実行すればカレンダーが表示されます。
- コンストラクタ引数で、描画先となる要素のIDを渡します。
- その他、選択可能範囲やデフォルトで選択されている日などがオプションで指定できるようです。
- 選択された日の取得は、「Calandar#getSelectedDates()」を呼び出せばOK。
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.6.0/build/calendar/assets/skins/sam/calendar.css"> <script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/yahoo-dom-event/yahoo-dom-event.js"></script> <script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/calendar/calendar-min.js"></script> <script type="text/javascript"> function onLoad() { // カレンダーを描画 calendar = new YAHOO.widget.Calendar("calendar"); calendar.render(); } // カレンダーで選択された日時を表示する関数 function showDate() { var stdout = document.getElementById("stdout"); stdout.innerHTML = ""; // カレンダーから選択された日時を取り出す。 var cals = calendar.getSelectedDates(); for ( var i=0;i < cals.length; i++ ) { stdout.innerHTML += cals[i].toString(); } } </script> </head> <body class="yui-skin-sam" onload="onLoad();"> <!-- カレンダーを描くdiv要素 --> <div id="calendar"></div> <div> <!-- クリックでカレンダーで選択された日時を表示。 --> <a href="javascript:showDate();">選択された日時を表示。</a> <div id="stdout"></div> </div> </body> </html>