关于本文的演示,请参见:http://www.itpow.com/demo/DHTMLCalendarWidget/。
DHTML Calendar widget 是一款功能非常强大的日历控件,本文介绍其几个常见的使用方法。之前还有一个流行的版本,但本文介绍的这个是更稳定、兼容性更强、功能更强、编程更方便的版本。
优点
- 功能强大:可含时间,可动态显示,可静态显示,可选择多日期……
- 编程方便:通过简单的代码配置,即可实现不同的功能……
- 使用方便:可以方便地定位到想要的年份,不像有些只有一年一年地选择……
引用
<link rel="stylesheet" href="calendar-blue2.css" type="text/css" />
<script type="text/javascript" src="calendar.js"></script>
<script type="text/javascript" src="lang/calendar-zh.js"></script>
<script type="text/javascript" src="calendar-setup.js"></script>
calendar-blue2.css 决定了要使用什么样的样式。
lang/calendar-zh.js 决定了要使用什么语言,原版的中文包是有问题的,本文所附的下载,是修复了该问题的。
基本使用
Calendar.setup({
inputField : "startDate",
button : "startDate"
});
startDate 为一个文本框的 ID。
添加了上述代码,即可实现:点击 startDate 时,弹出日历框,选择日历后,startDate 显示日期。
如果要将按钮和显示框分开,那么就将 inputField 和 button 指定不同的元件的 ID。
含时间的日历
Calendar.setup({
inputField : "startDate",
button : "startDate",
showsTime : true
});
注意代码中是 showsTime,不是 showTimes。
可以看到多了时间,而这个时间的改变非常的方便,不嫌麻烦的话,可以一下一下的点,想快速更改的话,按住它,然后向左拖减少,向右多增加。
静态的日历
function dateChanged(calendar)
{
if (calendar.dateClicked)
{
var y = calendar.date.getFullYear();
var m = calendar.date.getMonth(); // integer, 0-11
var d = calendar.date.getDate();
document.getElementById("startDate").value = y + "/" + (m + 1) + "/" + d;
}
}
Calendar.setup({
flat : "calendar-container",
flatCallback : dateChanged
});
这个日历会一直显示在屏幕上,并不是点击什么后才显示出来。可以看出代码要麻烦些。
flat : "calendar-container" 指定了日历框显示在一个 ID 为 calendar-container 的元素(通常是个 DIV)中。
获取值时请注意 calendar.date.getMonth 返回的是 0-11,这与 JavaScript 的 Date 对象相同,但与我们平常的思维不同,所以我在文本框中显示时将其加了 1。
下载
下载ITPOW修正后的 DHTML Calendar widget,修正了中文包的 BUG。