基于jQuery插件实现的"高级"时间控件

之所以叫高级，是因为比普通的选择控件多了一点点功能。。。

好久没有写表现层的东东了。项目经常会用选取时间范围的东东，所以就花了点儿时间写了一个jQuery的插件。。闲话少说 上图。。。

此组件的适用范围如下：

1.日期范围的查询报表。

2.可以作为表单提交。

实际使用截图

 现有版本更新为0.3

版本更新信息如下：

0.2v:

 1.增加国际化功能
 2.增加隐藏表单方便提交
 3.修复CSS下拉菜单位置的BUG

03v:

 1.增加自定义排序

 2.增加日期的选中

 3.代码的重构

代码在附件中 下载。。

1. 首先会有一个div的东东。渲染出时间的范围如图。2009-11-19 - 2009-11-19 。。

3.如点击这个月。上面的时间范围就会变为2009-11-01 - 2009-11-30.。

 
 4.点击应用按钮 ，就会获取到选中的时间范围。。所返回的值是字符串和时间数组，分别为value,date。这样获取的值就可以和后台程序进行交互

如何使用？

    <script type="text/javascript" src="javascripts/jquery-1.3.2.min.js"></script>
    <script type="text/javascript" src="javascripts/jquery.datepick.min.js"></script>
    <script type="text/javascript" src="javascripts/jquery.covertape.js"></script>

<style type="text/css">
@import "css/redmond.datepick.css";

@import "css/blue.covertape.css";
</style>

			startdate :new Date(),//开始日期
			enddate :new Date(),//结束日期
			format :"mm/dd/yyyy",
			onApply : function(value, date) {
			}
		}

$("#feng").datecontrol(
      {format:"yyyy-mm-dd", //日期格式。。。支持多种格式
        startdate:new Date("2009","9","01"),//开始日期
        enddate:new Date("2009","10","01"),//结束日期
       onApply : function(value, date){ //函数。。通过函数获取日期的值
        alert("Array Value="+value);//value是格式化日期的字符串（数组0开始日期，1结束日期）
        alert("Array Date="+date);//date是日期类型（同上）
      }
      });  

Q&A

Q:现有版本可以使用么

A:不建议使用，本作者会继续更新，修改BUG。

此组件的适用范围如下：

1.日期范围的查询报表。

2.可以作为表单提交。

 现有版本更新为0.3

版本更新信息如下：

0.2v:

 1.增加国际化功能
 2.增加隐藏表单方便提交
 3.修复CSS下拉菜单位置的BUG

03v:

 1.增加自定义排序

 2.增加日期的选中

 3.代码的重构

具体例子看上传的附件。

 $("#feng").datecontrol( //选中一个div
      {format:"yyyy-mm-dd",//自定义日期格式。
      startdate:new Date("2009","09","01"),enddate:new Date("2009","09","29"),//初始化日期范围。默认为1
        word:{
    	    define:"define range",
			today:"today",
			yestoday:"yestoday",
			lastweek:"last week",
			month:"this month",
			lastmonth:"last month",
			apply:"Apply"
      },//自定义控件文字描述。方便国际化的朋友
      dateDisplay : [ 'define', 'month',
  					'lastmonth','yestoday','today','lastweek'],//显示日期的种类和顺序
       onApply : function(value, date){
        alert("Array Value="+value);
        alert("Array Date="+date);
      }//应用方法，方便获取日期范围的字符串和日期类型的数组。
      });

详细例子 请看附件。