小鱼的空气

记录我所思

一个很好的日历控件Coolest

官方网址: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)的编码方式一致,否则乱码或不能弹出日历选择器。

 

posted on 2006-11-01 11:13 小鱼 阅读(1533) 评论(1)  编辑  收藏

评论

# re: 一个很好的日历控件Coolest 2009-06-14 10:30 sdfsf

sdfsfs  回复  更多评论   


只有注册用户登录后才能发表评论。


网站导航:
 
<2009年6月>
31123456
78910111213
14151617181920
21222324252627
2829301234
567891011

导航

统计

常用链接

留言簿(3)

我参与的团队

随笔档案

文章档案

搜索

最新评论