当前位置:Gxlcms > JavaScript > jqueryUIDatepicker时间控件的使用方法(终结版)_jquery

jqueryUIDatepicker时间控件的使用方法(终结版)_jquery

时间:2021-07-01 10:21:17 帮助过:2人阅读

近期项目中用到日期控件,感觉不错,写出来分享给大家看看,我限制的开始时间和结束时间跨度不超过三天,并配置有清空时间,重选时间等功能,分享给大家:
先给大家看两张效果图

在例子中我控制的开始时间和结束时间为三天,也就是开始时间和结束时间的跨度不能超过三天。

具体是怎么实现的,代码中会附有很详细的解释,请大家继续往下看:

第一步,引入控件js,这里有两个,一个是jquery.js,一个是jquery-ui-datepicker.js,当然还有引入样式文件:

第二步:创建一个文本输入框,text类型的input,我的demo中还写入了清空时间的设置,也就是一个按钮响应事件


    
    
    
    必选*
   
   
    
    
    
    必选*
   

里面value的值不用管,我这是写在项目中的代码,value值这样写是为了查询后刷新页面的时候时间框中依然可以有选择的时间值的。

下面的代码就是调用日期控件的了,代码如下:

下面先把上面代码中getTimeByDateStr(XXX) 方法的代码贴出来,大家看的方便,这个代码很简单,相信大家一看便懂:

代码到现在就可以实现日期控件的使用,并且开始时间和结束时间限制在三天以内,比如你选择了开始时间为2014-03-27,那么结束时间只有27,28,29三天可选,其余日期不可点击,如果你选择了结束时间为28,那么,现在开始时间就只能选择28,27,26了,就这样。

第三步:大家看清空按钮,清空按钮是清空时间选择框中的值,这个实现起来很简单了:

现在就可以使用了,如果只是使用控件,不需要设置时间限制就非常简单了,上面代码可以供多数日期选择方面的需求使用了,但是如果有特殊的话,还需自己去查api吧,当时我单单为了清空日期控件中的值,就是这句代码:dates.datepicker("option", "maxDate", null),就查了半天的api,还是需要大家有足够的耐心。

以上就是关于jquery UI Datepicker时间控件的全部内容介绍,暂时画上了一个句号,以后再有相关文章,一定第一时间与大家分享。

人气教程排行