官方网址：
http://dynarch.com/mishoo/calendar.epl纯JS实现，适用任何平台和应用，体积很小，可定制属却不少。
使用主要查看
calendar-setup.js，提供两个使用方法：
1. var cal = calendar("beginDate", "calBeginButton", "%Y-%m-%d");
2. Calendar.setup({
inputField : "f_date_a", // id of the input field
ifFormat : "%Y-%m-%d %H:%M", // format of the input field
showsTime : false, //是否显示时间
timeFormat : "24",
onUpdate : catcalc
});
在发行包里有详细的文档和DEMO，下面是一个应该例子：
<%
@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
<%@ include file="/components/calendar/calendar.jsp" %>
</head>
<body>
<div style="color:red;font:16px" align="centre">Coolest日历控件</div>
<form name="mainform"
action="<c:url value="/report/saleReport.do?action=view" />"
method="post" target="_blank">
<table class="border" width="90%" cellSpacing=0 cellPadding=2 align="center">
<tr>
<td class="left">发货日期</td>
<td class="right">
从:<input type="text" name="beginDate" value="2006-1-1" id="beginDate">
<img id="calBeginButton" src="<c:url value="/components/calendar/skins/aqua/cal.gif"/>" border="0" alt="选择日期" style="cursor: pointer;">
到:<input type="text" name="endDate" value="" id="endDate">
<img id="calEndButton" src="<c:url value="/components/calendar/skins/aqua/cal.gif"/>" border="0" alt="选择日期" style="cursor: pointer;">
<script type="text/javascript">
var cal1 = calendar("beginDate", "calBeginButton", "%Y-%m-%d");
var cal2 = calendar("endDate", "calEndButton", "%Y-%m-%d");
</script>
</td>
</tr>
<tr>
<td>点击输入：<input type="text" name="date" id="f_date_a"/></td>
<td><input type="text" name="date" id="f_calcdate" /> </td>
<tr>
<td colspan="2" class="bottom">
<input type="submit" class="submitButton" value="确定" style="margin-right:60px"/>
<BUTTON onclick="history.back();">返回</BUTTON>
</td>
</tr>
</table>
</form>
<script type="text/javascript">
function catcalc(cal) {
var date = cal.date;
var time = date.getTime()
// use the _other_ field
var field = document.getElementById("f_calcdate");
if (field == cal.params.inputField) {
field = document.getElementById("f_date_a");
time -= Date.WEEK; // substract one week
} else {
time += Date.WEEK; // add one week
}
var date2 = new Date(time);
field.value = date2.print("%Y-%m-%d %H:%M");
}
Calendar.setup({
inputField : "f_date_a", // id of the input field
ifFormat : "%Y-%m-%d %H:%M", // format of the input field
showsTime : false, //是否显示时间
timeFormat : "24",
onUpdate : catcalc
});
Calendar.setup({
inputField : "f_calcdate",
ifFormat : "%Y-%m-%d %H:%M",
showsTime : true,
timeFormat : "24",
onUpdate : catcalc
});
</script>
</body>
</html>
如使用中文需要在头部引入calendar-zh.js，注意的是此文件的编码方式（如GB2312）要和页面（如JSP）的编码方式一致，否则乱码或不能弹出日历选择器。