其实上次已经向大家介绍了一个JavaScript日期控件。这次呢介绍功能更加强大的Calendar java脚本控件。官方主页请见：.你可以看到在线演示以及整个源码的下载。效果图：
![]()
接下来简单介绍具体使用方法。一种是平面式的日期控件，一种是弹出式的日期控件。首先介绍第一种：平面式日期控件。
首先当然是下载控件，解压之后可以见到建立一个日期控件所需要的css以及js.新建一个html/jsp等web文件在
中导入以下文件：
|
<link rel="stylesheet" type="text/css" media="all" href="calendar-green.css" title="calendar-green" />
<script type="text/javascript" src="calendar.js"></script>
<script type="text/javascript" src="lang/calendar-en.js"></script>
<script type="text/javascript" src="calendar-setup.js"></script>
|
其中calendar-green.css是可以有用户自定义的。里面提供了win-cold,brown,blue,green等几种风格，很不错的。导入所需要的文件之后，我们开始动手创建我们的平面式的日期控件。首先创建一个容器：
|
<div id="calendar-container"></div>
|
然后编写js脚本：（可以放在
标记之后的任何地方）
|
<script type="text/javascript">
function dateChanged(calendar) {
// Beware that this function is called even if the end-user only
// changed the month/year. In order to determine if a date was
// clicked you can use the dateClicked property of the calendar:
if (calendar.dateClicked) {
// OK, a date was clicked, redirect to /yyyy/mm/dd/index.php
var y = calendar.date.getFullYear();
var m = calendar.date.getMonth(); // integer, 0..11
var d = calendar.date.getDate(); // integer, 1..31
// redirect...
window.location = "/" + y + "/" + m + "/" + d + "/index.php";
}
};
Calendar.setup(
{
flat : "calendar-container", // ID of the parent element
flatCallback : dateChanged // our callback function
}
);
</script>
|
其中window.location = "/" + y + "/" + m + "/" + d + "/index.php";代表比如我们写blog,在日期控件上点日期号码，就可以找到我们在那个日期内所写的所有博客文章。就是这个作用。当然你也可以实现你要的功能。很简单吧
接下来我们看看：弹出式日期控件。
当然同样需要加载所需的文件了，如上。然后在html实现，当用户点击textfield或者button弹出日期控件的效果。
|
<form ...>
<input type="text" id="data" name="data" />
<button id="trigger">Pop up</button>
</form>
|
紧跟着编写脚本：（把下面的js放在之后）
|
<script type="text/javascript">
Calendar.setup(
{
inputField : "data", // ID of the input field
ifFormat : "%m %d, %Y", // the date format
button : "trigger" // ID of the button
}
);
</script>
|
当然你也可以把button,换成一张图片，这样一看就知道点图片选择日期：
|
<form action="#" method="get">
<table cellspacing="0" cellpadding="0" style="border-collapse: collapse"><tr>
<td><input type="text" name="date" id="f_date_c" readonly="1" /></td>
<td><img src="img.gif" id="f_trigger_c" style="cursor: pointer; border: 1px solid red;" title="Date selector"
onmouseover="this.style.background='red';" onmouseout="this.style.background=''" /></td>
</table>
</form>
<script type="text/javascript">
Calendar.setup({
inputField : "f_date_c", // id of the input field
ifFormat : "%B %e, %Y", // format of the input field
button : "f_trigger_c", // trigger for the calendar (button ID)
align : "Tl", // alignment (defaults to "Bl")
singleClick : true
});
</script>
|
花样很多，不一一介绍。有兴趣的可以看
官方Document .
阅读(2599) | 评论(0) | 转发(0) |
