虽然现在的日历控件成千上万，但是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组件】基于YUI的表单验证器”指的是一个使用Yahoo用户界面库（YUI）开发的特定组件，它的主要功能是为HTML表单提供验证功能。YUI是一个开源的JavaScript库，它包含了丰富的工具和组件，用于创建交互式、高...
**YUI3 Dialog组件详解** YUI3是Yahoo!推出的一款强大的JavaScript库，它提供了丰富的UI组件和工具，用于构建高性能、跨平台的Web应用程序。Dialog组件是YUI3中的一个重要部分，它允许开发者创建可交互的弹出窗口，...
4. **日期和时间选择器**：YUI Calendar组件提供了一个用户友好的日历界面，可以用于日期输入和选择，简化了日期相关的用户交互。 5. **表单验证**：YUI FormValidator插件可以帮助开发者快速实现表单验证，确保...
**YUI-EXT使用详解** YUI-EXT是基于Yahoo! User Interface Library (YUI)的一个扩展库，专为构建富互联网应用程序（RIA）而设计。YUI-EXT提供了许多高级组件，如表格、菜单、窗口、表单、布局管理器等，极大地丰富...
《YUI使用文档》汉语版是一份详细的YUI学习材料，它涵盖了这个JavaScript库的核心功能和使用方法。YUI，全称Yahoo! User Interface Library，是Yahoo开发的一个开放源代码的JavaScript库，旨在帮助开发者创建交互式...
3. **丰富的组件库**：YUI包含了一系列组件，如：按钮、菜单、对话框、日历、图表、拖放功能、动画效果等，满足各种网页交互需求。 4. **事件系统**：YUI的事件系统支持DOM事件的监听和处理，使开发者可以方便地响应...
此外，YUI的延迟加载（LazyLoad）特性，能让非核心模块在需要时才加载，进一步优化资源使用。 总结，YUI 3.9.0 r2是一个强大的前端开发框架，它提供了一整套工具和组件，以应对复杂的界面设计挑战，并通过优化资源...
本篇文章将深入探讨如何使用Yahoo的开源工具——YUI Compressor来实现这一目标。 YUI Compressor是由Yahoo开发的一款高效且强大的JavaScript和CSS压缩工具。它能够通过删除空格、注释和不必要的字符，以及进行代码...
例如，例子中可能用到了“yui-button”来创建交互式的按钮，或者使用“yui-menu”构建导航菜单，这些组件大大简化了开发工作，提升了用户体验。 在实际开发中，YUI的调试工具也非常实用。YUI Logger可以帮助开发者...
YUI的核心理念是模块化，这意味着你可以按需引入所需的组件，降低页面加载负担。它通过`yui.yahooapis.com`的CDN服务提供，也可以下载到本地使用。YUI主要由以下几个部分组成： 1. **Core（核心）**：这是YUI的基础...
这个压缩包很可能是包含了一系列的代码示例，演示了如何在实际项目中使用YUI 3.0的各种组件和功能。 【描述】提到这是一个"Examples"集合，并提醒用户这不是"spring2.0中文参考手册.pdf"，暗示了压缩包的内容与...
这些实例涵盖了各个组件的使用方法，从简单的按钮创建到复杂的布局配置，都提供了清晰的代码示例和解释。 **5. 社区与文档支持** YUI有着活跃的开发者社区，开发者可以在论坛上交流问题、分享经验。官方文档详尽且...
通过学习这个组件，开发者可以掌握如何在网页中创建交互式的树形结构，并学会如何与其他YUI组件配合使用，提升用户界面的交互体验。 在实际应用中，YUI TreeView的使用通常涉及到以下几个关键知识点： 1. **初始化...
YUI 库，全称Yahoo! UI Library。是一组工具和控件，用...YUI 基于BSD协议，对所有的使用方式都是免费的。YUI 项目包括YUI 库和两个创建时工具： YUI Compressor (压缩) 和 YUI Doc （JavaScripts代码的文档引擎）。
YUI 2.7是这个库的一个版本，包含了文档、源代码以及实例，使得开发者能够深入理解并有效地使用这一框架。 **1. YUI的核心组件** YUI由多个核心模块组成，包括事件处理、DOM操作、动画效果、拖放功能、Ajax通信、...
- **Event需要的引入**：通常需要先引入YUI的Event模块才能使用这些工具。 - **Event工具集提供的方法**：包括`YAHOO.util.Event.addListener`, `YAHOO.util.Event.removeListener`, `YAHOO.util.Event.on`, `...
Yui组件分成2类：工具包和控件库 Yui 工具包 Yui 工具包利用DOM脚本来简化浏览器内的开发（in-browser devolvement），使用DHTML和AJAX的特性开发所有的Web程序。 动画（Animation）：在你的页面中通过指定位置，...
《深入理解Alloy_Liferay：基于YUI封装的框架及使用文档详解》 Alloy_Liferay是一款基于YUI（Yahoo User Interface Library）封装的框架，主要用于Liferay Portal的开发和扩展。这款框架集成了YUI的强大功能，为...
通过这些示例，你可以学习如何创建事件监听器、如何使用布局组件构建页面结构、如何实现动画效果以及如何与其他服务通信。同时，文档部分详细阐述了每个模块的用法、参数、返回值和注意事项，是学习和调试YUI的宝贵...
- `docs/`：YUI的文档资料，帮助开发者理解和使用各个组件。 - `examples/`：这里包含了大量的示例代码，展示了如何在实际项目中应用YUI2的各种功能，是学习和快速上手的好资源。 - `src/`：源代码目录，如果你需要...