カレンダーでは単純に1つの日付を選択するだけとは限らず、複数の日付を選択することもあります。
YUIのカレンダーで複数の日付を選択できるようにするには、YAHOO.widget.Calendar()の3番目のオプションにMULTI_SELECT : trueを指定します。MULTI_SELECT : falseとすると、複数の日付を選択することができなくなります。デフォルトではMULTI_SELECT : falseとなっているため、1つの日付しか選択できません。1つしか日付が選択できない場合はクリックされ選択された日付を求めるだけですみますが、複数の日付が選択されている場合は別の方法を使う必要があります。
選択されている日付はカレンダーオブジェクトのgetSelectedDates()で求めることができます。結果は配列で返され、選択された日付が各要素に格納されます。配列に格納されている日付はyy/mm/dd形式ではなくJavaScriptのDateオブジェクトになっています。このため、年を求めるにはgetFullYear()、月を求めるにはgetMonth()、日付を求めるにはgetDate()を使います。getMonth()で得られる月は実際の月よりも1少ない値になりますサンプル08では、クリックで選択された複数の日付をテキストフィールドに表示します。
 |
サンプル08の実行結果。複数の選択を可能とする |
サンプル08
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>YUIカレンダーサンプル</title>
<link rel="stylesheet" type="text/css" href="css/calendar.css">
<script type="text/javascript" src="js/yahoo-dom-event.js"></script>
<script type="text/javascript" src="js/calendar.js"></script>
<script type="text/javascript"><!--
var calObj;
window.onload = function() {
var dateRange = { mindate:"7/21/2007", maxdate:"8/31/2007",
MULTI_SELECT : true, close:true
};
calObj = new YAHOO.widget.Calendar("calObj","calendarContainer", dateRange);
calObj.cfg.setProperty("MONTHS_SHORT", ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"]);
calObj.cfg.setProperty("MONTHS_LONG", ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"]);
calObj.cfg.setProperty("WEEKDAYS_1CHAR", ["日", "月", "火", "水", "木", "金", "土"]);
calObj.cfg.setProperty("WEEKDAYS_SHORT", ["日", "月", "火", "水", "木", "金", "土"]);
calObj.cfg.setProperty("WEEKDAYS_MEDIUM",["日", "月", "火", "水", "木", "金", "土"]);
calObj.cfg.setProperty("WEEKDAYS_LONG", ["日曜日", "月曜日", "火曜日", "水曜日", "木曜日", "金曜日", "土曜日"]);
calObj.cfg.setProperty("MY_YEAR_POSITION", 1);
calObj.cfg.setProperty("MY_MONTH_POSITION", 2);
calObj.cfg.setProperty("MDY_YEAR_POSITION", 1);
calObj.cfg.setProperty("MDY_MONTH_POSITION", 2);
calObj.cfg.setProperty("MDY_DAY_POSITION", 3);
calObj.selectEvent.subscribe(checkDate, calObj, true);
calObj.deselectEvent.subscribe(checkDate, calObj, true);
calObj.render();
}
function checkDate(type,args,obj){
var selList = calObj.getSelectedDates();
var dateList = "";
for (var i=0; i<selList.length; i++) {
var d = selList[i];
dateList += d.getFullYear()+"年"+(d.getMonth()+1)+"月"+d.getDate()+"日, ";
}
YAHOO.util.Dom.get("sDate").value = dateList;
}
// --></script>
</head>
<body>
<h1>YUIカレンダーサンプル(複数選択&表示)</h1>
<form>
<input type="text" id="sDate" value="" size="80">
</form>
<div id="calendarContainer"></div>
</body>
</html>
