官方網址：
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）的編碼方式一致，否則亂碼或不能彈出日歷選擇器。
?