YUIのCalenderコンポーネントを使用

現在のカレンダーコントロールは何千もあるが、YUIが提供するカレンダーコントロールは強力なコンポーネントであることは間違いない.また、サイト全体にYUIをフロントエンドフレームとして採用すれば、全体的に効果的です.YUIのカレンダーを使用するには、まず対応するCSSとJavascriptファイルを導入します.
 
 

<div id="mycal"></div>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.7.0/build/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.7.0/build/calendar/assets/skins/sam/calendar.css" />
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>

<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/calendar/calendar-min.js"></script>
<style type="text/css">
/*margin and padding on body element
  can introduce errors in determining
  element position and are not recommended;
  we turn them off as a foundation for YUI
  CSS treatments. */
body {
	margin:0;
	padding:0;
}

#date1 { width:100px }
#cal1Container { margin-right:10px;margin-bottom:10px }
</style>

 
mycalはカレンダーを入れる容器です.YUIのbodyデフォルトclassは、コントロールを正常に表示するにはです.
次に、カレンダーを表示する関数を作成します.
 
 

function selectData(obj){
	var objPosition = getArea(obj);
	var container = document.getElementById("mycal");
	container.style.left = objPosition.left+"px";
	container.style.top = objPosition.bottom+"px";
	container.style.position = "absolute";
	container.style.display = "";
	cal = new YAHOO.widget.Calendar("my","mycal",{ pages:2, close:true });
	cal.render();
	cal.selectEvent.subscribe(function(){
		if (cal.getSelectedDates().length > 0) {
			var selDate = cal.getSelectedDates()[0];
			obj.value =  selDate.getFullYear() + "-" + (selDate.getMonth()+1) + "-" + selDate.getDate();
		} else {
			obj.value = "";
		}
		document.getElementById("mycal").style.display = "none";
	});
}

 
呼び出しの際、そのinput空間で呼び出し、onClick=「selectData(this)」を付ければよい.
 
YUIには奇妙なところ(selDate.getMonth()+1)が表示されているのが正しい月で、公式の例でもそう書いてあります--!
 
YUIのカレンダーコントロールもYUIの伝統であり、機能が強く、使い勝手が悪い.APIに従って自分の欲しいカレンダーを広げることができますが、天下には無料の昼食がなく、代価は手間がかかります.