カレンダーで日時が選択された時に、その日付を知りたい場合があります。バージョン2.4.0以前ではonSelectイベントを使うことができましたが、現在では使わないようになっています。このため、現在では以下のようにsubscribe()を使って処理します。
以下のサンプルではクリックすると選択された日付がアラートダイアログに表示されます（
サンプル01を実行する）。
【サンプル】
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Sample</title>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.4.1/build/calendar/assets/skins/sam/calendar.css">
<link rel="stylesheet" href="main.css" type="text/css" media="all">
<script type="text/javascript" src="http://yui.yahooapis.com/2.4.1/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.4.1/build/calendar/calendar-min.js"></script>
<script type="text/javascript"><!--
function displayCalendar(){
var myCalendar = new YAHOO.widget.Calendar("calendarArea");
myCalendar.render();
myCalendar.selectEvent.subscribe(function(eventName, selectDate){
alert(selectDate);
}, myCalendar, true);
}
// --></script>
</head>
<body class="yui-skin-sam">
<h1>カレンダーで選択された日を表示します</h1>
<form>
<input type="button" value="カレンダーを表示" onClick="displayCalendar()">
</form>
<div id="calendarArea"></div>
</body>
</html>
クリック時でなく、通常の状態で選択されている日付を取得するにはgetSelectedDates()を使います。
getSelectedDates()を使うと選択された日付(Dateオブジェクト)を配列に入れて返してくれます。あとは、配列の数だけ繰り返すことで選択されたすべての日付を取得することができます。この日付はDateオブジェクトになっているのでDateオブジェクトで使用することができるメソッドを使うことができます。年月日を求めるメソッドは以下のようになります。
| getFullYear() | 西暦年4桁 |
|---|
| getMonth() | 月 |
|---|
| getDate() | 日 |
|---|
| getDay() | 曜日 |
|---|
また、一日だけでなく複数の日付を選択する場合にはYAHOO.widget.Calendar()のオプションでmulti_select:trueを指定しておきます。
以下のサンプルでカレンダーを表示した後に「選択された日付を表示」ボタンをクリックすると、選択された日付がアラートダイアログに表示されます（サンプル02を実行する）。
【サンプル02】
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Sample</title>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.4.1/build/calendar/assets/skins/sam/calendar.css">
<link rel="stylesheet" href="main.css" type="text/css" media="all">
<script type="text/javascript" src="http://yui.yahooapis.com/2.4.1/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.4.1/build/calendar/calendar-min.js"></script>
<script type="text/javascript"><!--
var myCalendar;
function displayCalendar(){
myCalendar = new YAHOO.widget.Calendar("calendarArea"
,{ multi_select:true });
myCalendar.render();
}
function checkDate(){
dateList = myCalendar.getSelectedDates();
for (var i=0; i<dateList.length; i++){
var Y = dateList[i].getFullYear();
var M = dateList[i].getMonth() + 1;
var D = dateList[i].getDate();
alert(Y+"/"+M+"/"+D);
}
}
// --></script>
</head>
<body class="yui-skin-sam">
<h1>カレンダーで選択された日を表示します</h1>
<form>
<input type="button" value="カレンダーを表示" onClick="displayCalendar()">
<input type="button" value="選択された日付を表示" onClick="checkDate()">
</form>
<div id="calendarArea"></div>
</body>
</html>
[
目次へ]