Posted on 2007-11-06 14:13
twh_zj 阅读(310)
评论(0) 编辑 收藏
JSCalendar 日历控件
1.
K 可以自己换皮肤，有好几套，可以设置日期时间格式==，下面地址可以下载
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", ifFormat : "%Y-%m-%d", button : "publisherDateBt" });
</script>
注意，日历控件还可以显示小时和分钟，只要设置Calendar.setup中的参数即可，详细看JSCalendar自带的文档。
2. Jason's Date Input Calendar
下载
calendarDateInput.js
Step 1: Insert the below into the <HEAD> section of your page:
<script type="text/javascript" src="calendarDateInput.js"></scritp>
Step 2: Once the above script is added, adding a popup Calendar field to your form is a one step process. Take a look at the below example:
<form>
<script>DateInput('orderdate', true, 'DD-MON-YYYY')</script>
<input type="button" onClick="alert(this.form.orderdate.value)" value="Show date value passed">
</form>
down load imgfiles
3. sohu's Input Calendar
<input type="text" id="birthday" name="birthday" value="" size=12/>
<input type="button" name="submit3" value="↓" onclick="ShowCalendar('birthday')"/>
<下载>
网友有好的发现都连接下吧。。。