DHTML Calendar widget 日历控件常见使用

作者:vkvi 来源:ITPOW(原创) 日期:2010-2-1

关于本文的演示,请参见: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"
});

DHTML Calendar widget 日历常见使用

startDate 为一个文本框的 ID。

添加了上述代码,即可实现:点击 startDate 时,弹出日历框,选择日历后,startDate 显示日期。

如果要将按钮和显示框分开,那么就将 inputField 和 button 指定不同的元件的 ID。

含时间的日历

Calendar.setup({
    inputField    : "startDate",
    button        : "startDate",
    showsTime     : true
});

DHTML Calendar widget 日历常见使用

注意代码中是 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。

相关文章