使用YUI的Calender组件

jkfzero · 发表于 2013-1-29 07:34:03

   虽然现在的日历控件成千上万，但是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扩展出自己想要的日历，但是天下没有免费的午餐，代价就是要费一番功夫。

		自动登录	找回密码
密码			立即注册

使用YUI的Calender组件

浏览过的版块