65.9K
CodeProject 正在变化。 阅读更多。
Home

面向 Web 程序员的 XCalendar 类

simonchen.net
starIconstarIconstarIcon
emptyStarIcon
starIcon
emptyStarIcon

3.29/5 (7投票s)

2008 年 2 月 3 日

GPL3

6分钟阅读

viewsIcon

42785

downloadIcon

427

兼容IE/Firefox，XCalendar无需额外CSS文件

引言

XCalendar是一个用纯JavaScript代码封装的日历类。您可以使用它在网页中创建一个或多个酷炫的日历，它目前兼容IE 6+/Firefox 1.5+/Opera/Chrome/Safari。

背景

我曾使用过一些用JavaScript编写的日历，它们大多非常复杂，并且日历中绑定了一个或多个独立的CSS文件。当我需要自定义日历时，我必须详细阅读JavaScript代码和CSS代码，然后根据我的想法进行修改。另一方面，这些日历的代码不够紧凑，更多的源代码并非基于OOP（面向对象编程），我经常遇到我的代码的命名空间冲突，其中一些仍然存在兼容性问题。

因此，我决定编写一个日历类，使其易于移植到任何浏览器，并且由于它完全基于OOP，其代码非常紧凑和可扩展。

主要特性

XCalendar比现有解决方案具有更多优点，例如

  1. XCalendar无需额外的CSS文件依赖。
  2. XCalendar不修改任何原生JavaScript类的原型属性。
  3. 使用超级简单，并且XCalendar可以最大程度地定制。
  4. 无命名空间冲突（参见上文第2点），您只需注意/避免关键字 - XCalendar，它可能被您自己的某些代码覆盖。
  5. 兼容多个浏览器（IE 6+/Firefox 1.5+/Opera/Safari/Chrome）

Using the Code

这里只是一小段代码，告诉您如何在网页中使用XCalendar类

<input type="text" id="mycalendar" />
<script type="text/javascript"> 
// We create a new instance of XCalender here. 
var c = new XCalendar(); 
// Before creating calendar, we'd want to customize the calendar. 
// c.setDateRange(2008,1,5,2008,2,6); c.setSelDate(2008,2,2); c.setStyle(3); 
// it works now. 
c.create(document.getElementById("mycalendar")); 
</script>

有关更多详细信息，请参阅`xcalendar.zip`中压缩的示例 - `test.html`。轻量级的coolcalendar.js在`xcalendar.zip`的“`lite`”文件夹中。

类规范

create(_textbox, _parent, _width, _height, _id);
  • @目的：以弹出模式创建新日历，将绑定或创建一个文本框，并跟随一个下拉按钮。
  • @参数:
    • _textbox：可选，哪个文本框（即<INPUT />）绑定到日历。如果_textbox为null，则日历将创建一个新的文本框（非<INPUT />）。
    • _parent：可选，如果您指定了_textbox，则_parent将被忽略，否则，它指示新日历将放置在何处。
    • _id：可选，日历的ID，您可以通过document.getElementById('日历的ID')获取创建的日历
    • _width, _height：可选，指示日历的大小，默认为(250, 100)。
createFlat(_parent, _width, _height, _id);
  • 该方法与上面的创建方法类似，不同之处在于日历不会显示文本框和下拉按钮。
    （即，日历以非弹出模式创建）

以下方法应在使用“create”或“createFlat”方法之前调用。

setSelDate(_year,_month,_day);
  • @目的：使用setSelDate方法初始化日历当前选定的日期。
  • @参数:
    • _year、_month、_day：作为数字的初始日期。
      注意：如果您不使用此方法，日历将显示今天。
setDateRange(_startyear,_startmonth,_startday,_endyear,_endmonth,_endday);
  • @目的：使用setDateRange方法初始化日历选择日期的范围，您不能选择超出选择日期范围的任何日期。
  • @参数:
    • _startyear, _startmonth ...：从日期1（开始）到日期2（结束）。
setStyle(style);
  • @目的：使用setStyle自定义日历的不同通用样式，目前，我们只提供在create方法之前调用的三种样式。
  • @参数：style：可以传入整数1、2或3，其他值无效。
customStyle(options);
  • @目的：当您想创建更灵活的样式时，此方法比setStyle更有用。
  • @参数：options：它是一个JSON对象，对象中的每个属性名和相关数据类型应参考`XCalendar.config`。
enableTooltip(ok);
  • @目的：ok = true以启用日历的工具提示。
setFormat(format);
  • @目的：它将指定日历中日期的显示格式。
  • @例如：setFormat('%Y-%m-%d')，如果今天是2008年2月2日，日历将显示2008-2-2。
    注意：如果您不使用此方法或传入错误的格式，它将使用默认格式 - %d-%b-%Y，以上述示例，它将是2-Feb-2008。
hideDateController();
  • @目的：隐藏调整当前年份、月份的控制器，它还隐藏“重置”按钮。
enableSelector(ok);
  • @目的：通常，日期控制器是一个微调器（即，上一年、下一年按钮...）来控制当前年份、月份。如果您调用该方法并将参数“ok”设置为true，它将使用选择框而不是微调器来选择当前年份、月份。
enablePopup(ok);
  • @目的：它启用/禁用日历的“弹出”模式，如果您使用create方法以“弹出”模式创建日历，并且在调用create方法之前调用了enablePopup(false)，则此行为将与直接调用createFlat方法以非“弹出”模式创建日历相同。
enableShadow(ok);
  • @目的：默认情况下，以“弹出”或“非弹出”模式显示的日历具有阴影效果，当您在创建日历之前使用enableShadow(false)时，阴影效果将不会出现。
setYearRangeWithSelector(min, max);
  • @目的：此方法仅当您已调用enableSelector(true)时才有效，您可以在“年份”选择框中指定最小年份和最大年份。通常，如果您不调用此方法，则最小年份是从今天向后减少50年，最大年份是从今天向前增加50年。
setDropButtonImage(url);
  • @目的：对于“弹出”模式日历，下拉按钮将使用“...”文本，看起来很丑陋，您可能希望自定义一个“日历”头像图片而不是该“...”文本。参数“url”是图片路径，您可以使用相对路径或完整路径。图片大小16x16是完美的。
setZIndex(index);
  • @目的：默认情况下，显示的日历的索引顺序为“999”，一些HTML元素的顺序高于“999”，它们将层叠在显示的日历上，因此，您应该手动调用该方法以增加顺序。

类静态规范

问：什么是“类静态规范”？
答：您不需要创建XCalendar的新实例即可直接使用XCalendar的某些方法。

XCalendar.setValue(oEditor, value);
  • @目的：为已创建的日历设置新日期，这是一个非常有用的方法。
  • @参数:
    • oEditor：与XCalendar的任何实例绑定的编辑器（即文本框，HTML代码为<INPUT />）。
    • value：日期值，其格式必须类似于以“-”分隔的2008-2-2（%Y-%m-%d）。如果您传入无效的日期值，则不执行任何操作。
  • @例如：这是一个示例，告诉您如何使用XCalendar.setValue方法
<script type="text/javascript">
function foo()
{
// We created the instance of XCalendar in 'foo' function.
var mycal = new XCalendar;
mycal.create(document.getElementById('input_element'));
}

function foo2()
{
/* 
Now, we'd need to change a new date - 2007-12-12 with the 
instance 'mycal' created in 'foo' function.
A question is 'mycal' isn't a global variable, How do we get it?
In other hand, you might want to set 'mycal' to be global, 
then via like mycql.setNewDate to change the date of the calendar, 
it's good idea. A best way that all you only have do is like the below code:
*/
XCalendar.setValue(document.getElementById('input_element'), '2007-12-12');
}
</script>

与XCalendar.getValue函数类似，它返回已创建日历的值，并且可以指定格式（例如%Y/%m/%d）。
注意：如果您传入无效格式，这将返回日历中显示的默认值。

XCalendar.getValue(oEditor, format);

获取一年中某个月天数的实用方法

XCalendar.getDaysInMonth(year, month);

验证日期的实用方法

XCalendar.isDate(_year,_month,_day);

命名空间冲突

为防止命名空间冲突，某些变量名不应称为XCalendar，例如

// XCalendar is re-defined to an integer, so the class - XCalendar is overridden now. 
var XCalendar = 1;

// Error! XCalendar has been overridden, so you never create the calendar somewhere.
var mycal = new XCalendar;

历史

  • 2008年1月20日：XCalendar首次创建
  • 2008年2月4日：最后修改
  • 2008年4月9日：源代码更新
  • 2011年7月26日：修复了Internet Explorer/Firefox/Opera的一些bug，新增功能如下
    1. 支持Safari/Chrome浏览器
    2. 可以创建非弹出模式
    3. 日期控制器有两种模式 - 微调器和选择器
    4. 日期控制器可以隐藏
    5. 提供阴影效果
    6. 当以大尺寸创建日历时，文本大小可以自动缩放
© . All rights reserved.