JSCalendar 日历控件

来源：互联网发布：汕头网络问政编辑：程序博客网时间：2024/06/05 16:42

目录(?)[+]

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=<span class="code-quote">"${ctx}/widgets/calendar/skins/theme.css"</span> type=<span class="code-quote">"text/css"</span> rel=<span class="code-quote">"stylesheet"</span>/><script type=<span class="code-quote">"text/javascript"</span> src=<span class="code-quote">"${ctx}/widgets/calendar/calendar.js"</span>></script><script type=<span class="code-quote">"text/javascript"</span> src=<span class="code-quote">"${ctx}/widgets/calendar/calendar-setup.js"</span>></script><script type=<span class="code-quote">"text/javascript"</span> src=<span class="code-quote">"${ctx}/widgets/calendar/lang/calendar-en.js"</span>></script>

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

2. 使用

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

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