基于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 。。

     2.点击时间范围，会出现一个选择时间范围的下拉菜单。用户可以选择的时间范围有 自定义时间范围 今天 昨天 上周 这个月 上个月。。

     

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

 

 

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

 

 

如何使用？

1.要有一个普通的div。。。

<div id="feng"></div>

2.链接javascript和css

    <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>

 

3.可以获取日期范围的数据。。。项目传入的参数如下

var defaults = {

			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:因为没必要重复造轮子。。。现有的时间选择控件已经非常牛逼了。。

 

Q:现有版本可以使用么

 

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

 

Q:不能使用为啥公开。

A:提出一个想法，希望大家开发更好的这种东西。。而不是仅仅去使用。。

Q:会有教程开放么

A:本人代码很烂。。但会提供一个思路。

Q:说了那么多废话，代码在哪下载.

A:http://socifiles.com/d/2164eb。。

评论

12 楼 xyzxiaoxi 2012-11-20  

一个bug,clear之后datepick与onApply报错……要判断startDate与endDate是否为空。

11 楼 wv1124 2009-11-27  

能支持选择散列的日期时间就更牛了！

10 楼 风雪涟漪 2009-11-24  

hcqenjoy 写道

建议能支持双输入框及单个时间选择

恩，一些朋友也反馈了这个问题，下个版本增加这个功能点。

9 楼 hcqenjoy 2009-11-24  

建议能支持双输入框及单个时间选择

8 楼 phoenixup 2009-11-23  

干的不错，一直以来都是使用My97，完整的日期时间选择，做的足够细致。虽然目前楼主的我认为比My97还差些~，不过期待楼主能超越它~

7 楼 风雪涟漪 2009-11-23  

关于实际使用DEMO已更新。。

6 楼 风雪涟漪 2009-11-23  

<p>此组件的适用范围如下：</p>
<p>1.日期范围的查询报表。</p>
<p>2.可以作为表单提交。</p>
<p> </p>
<p> </p>
<p> 现有版本更新为0.3</p>
<p>版本更新信息如下：</p>
<p>0.2v:</p>
<p> 1.增加国际化功能<br> 2.增加隐藏表单方便提交<br> 3.修复CSS下拉菜单位置的BUG</p>
<p> </p>
<p>03v:</p>
<p> 1.增加自定义排序 </p>
<p> 2.增加日期的选中 </p>
<p> 3.代码的重构</p>
<p> </p>
<p> <br><img src="http://dl.iteye.com/upload/attachment/171372/8ed55da5-9839-3975-8d83-fae0e1fd79a2.jpg" alt=""></p>
<p> </p>
<p>具体例子看上传的附件。</p>
<p> </p>
<pre name="code" class="js"> $("#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);
      }//应用方法，方便获取日期范围的字符串和日期类型的数组。
      });</pre>
<p> </p>
<p>详细例子 请看附件。</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>

5 楼 nickevin 2009-11-23  

赞一个
首先lz发帖的格式很规范 看的人很舒服
其次内容也不错

当然我不能控制其他说不好的人的语言功能

好了 希望lz好心情 再接再厉

4 楼 lixindiy 2009-11-23  

纯粹是一个标题党.....鄙视.................

3 楼 wenyiyun 2009-11-23  

calendar_date_select,这个插件也好用

2 楼 rainchen 2009-11-23  

http://www.filamentgroup.com/lab/date_range_picker_using_jquery_ui_16_and_jquery_ui_css_framework/

这里有个类似的，日期范围选择+datepicker

1 楼 xuanye 2009-11-22  

没看懂，怎么用，有什么用