JSCalendar 日历控件

1. 概述

日历控件我们使用dynarch的JSCalendar: http://www.dynarch.com/projects/calendar/

下载包中有完整的sample 和文档。

1.1 SpringSide 的封装与修改

SpringSide Bookstore的例子里将所需的文件封装到了/webapp/widgets/calendar/中，其中springside封装的calendar.jsp打印了所有需要的js,css 文件，内容如下：

<link href="${ctx}/widgets/calendar/skins/theme.css" type="text/css" rel="stylesheet"/>
<script type="text/javascript" src="${ctx}/widgets/calendar/calendar.js"></script>
<script type="text/javascript" src="${ctx}/widgets/calendar/calendar-setup.js"></script>
<script type="text/javascript" src="${ctx}/widgets/calendar/lang/calendar-en.js"></script>

另外，两个原版的中文语言文件calendar-zh.js有误，springside作了修正，补回了缺失的 Calendar._FD = 0; 语句。

2. 使用

BookStore的图书管理--表单界面演示了基本的用法，最经典的使用代码如下：

<%@ include file="/widgets/calendar/calendar.jsp" %>
<html:text property="publisherDate" styleClass="text"/>
<button id="publisherDateBt" type="button" class="button"> ...</button>
<script type="text/javascript">
	Calendar.setup({
	inputField  : "publisherDate",      // id of the input field
	ifFormat    : "%Y-%m-%d",       // the date format
	button      : "publisherDateBt"    // id of the button
	});
</script>

注意，日历控件还可以显示小时和分钟，只要设置Calendar.setup中的参数即可，详细看JSCalendar自带的文档。