欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

使用YUI的Calender组件 博客分类: web前端,openApi YUICSSJavaScriptYahoo框架

程序员文章站 2024-02-20 10:21:04
...

      虽然现在的日历控件成千上万,但是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是<body class="yui-skin-sam">才能将其上的控件正常显示。

    然后构造显示日历的函数。

 

 

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扩展出自己想要的日历,但是天下没有免费的午餐,代价就是要费一番功夫。