jquery UI Datepicker时间控件的使用方法(终结版)


Posted in Javascript onNovember 07, 2015

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

jquery UI Datepicker时间控件的使用方法(终结版)

jquery UI Datepicker时间控件的使用方法(终结版)

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

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

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

<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript" src="js/jquery-ui-datepicker.js"></script> 
<link rel="stylesheet" type="text/css" href="css/jquery-ui.css" />

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

<td width="35%">
    <label>开始时间:</label>
    <input type="text" name="start" id="start" value="${params.start}" readonly="true" title="日期范围不能大于3天"/>
    <input type="button" class="formButton" value="清空" onclick="cleaPrevInput(this);"/>
    <font color="red">必选*</font>
   </td>
   <td width="35%">
    <label>结束时间:</label>
    <input type="text" name="end" id="end" value="${params.end}" readonly="true" title="日期范围不能大于3天"/>
    <input type="button" class="formButton" value="清空" onclick="cleaPrevInput(this);"/>
    <font color="red">必选*</font>
   </td>

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

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

$(function(){
 // 获取调用控件的对象
 var dates = $("#start,#end");
 var option;
 //设置目标时间,因为例子中的开始时间和结束时间是有时间限制的
 var targetDate;
 var optionEnd;
 var targetDateEnd;
 dates.datepicker({
  showButtonPanel:false,
  //当选择时间的时候触发此事件
  onSelect: function(selectedDate){ 
   if(this.id == "start"){
   // 如果是选择了开始时间
   option = "minDate";
   //getTimeByDateStr 这个方法的代码下面会贴出来的,就是处理时间的代码
   var selectedTime = getTimeByDateStr(selectedDate);
   var minTime = selectedTime;
   targetDate = new Date(minTime);
   //设置结束时间
   optionEnd = "maxDate";
   targetDateEnd = new Date(minTime+2*24*60*60*1000);
   }else{
   // 如果是选择了结束时间
   option = "maxDate";
   var selectedTime = getTimeByDateStr(selectedDate);
   var maxTime = selectedTime;
   targetDate = new Date(maxTime);
   //设置开始时间
   optionEnd = "minDate";
   targetDateEnd = new Date(maxTime-2*24*60*60*1000);

   }
   //设置时间框中时间,比如根据选择的开始时间,限制结束时间的不可选项,dates.not(this)是js选择器使用,
   //datepicker("option", option, targetDate),这个就是日期控件封装的api了
   dates.not(this).datepicker("option", option, targetDate); 
   dates.not(this).datepicker("option", optionEnd, targetDateEnd); 
  }
 });
});

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

//根据日期字符串取得其时间
function getTimeByDateStr(dateStr){
 var year = parseInt(dateStr.substring(0,4));
 var month = parseInt(dateStr.substring(5,7),10)-1;
 var day = parseInt(dateStr.substring(8,10),10);
 return new Date(year, month, day).getTime();
}

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

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

//清空日历控件
function cleaPrevInput(objs){
 //清空输入框中的值,但是仅仅是清空了值而已,时间控件的选值限制还在的
 $(objs).prev().val("");
 //如果开始时间和结束时间都清空了,这时应该是你选择的那个框中是没有时间限制的,也就是说可以随便选择日期
 if($('#start').val()=="" && $('#end').val()==""){
 var dates = $("#start,#end");
 //调用datepicker封装的api,使刚刚设置的开始时间和结束时间为空,这样就可以选择任意日期了
 dates.datepicker("option", "minDate", null);
 dates.datepicker("option", "maxDate", null);
 }
}

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

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

Javascript 相关文章推荐
用正则表达式替换图片地址img标签
Nov 22 Javascript
javascript 获取网页标题代码实例
Jan 22 Javascript
js实现同一页面可多次调用的图片幻灯切换效果
Feb 28 Javascript
JS实现黑色风格的网页TAB选项卡效果代码
Oct 09 Javascript
基于JavaScript实现通用tab选项卡(通用性强)
Jan 07 Javascript
JavaScript中常用的验证reg
Oct 13 Javascript
JS实现复制功能
Mar 01 Javascript
Node.js学习之地址解析模块URL的使用详解
Sep 28 Javascript
解决Angular2 router.navigate刷新页面的问题
Aug 31 Javascript
JS实现随机点名器
Apr 12 Javascript
全面解析Vue中的$nextTick
Dec 24 Vue.js
vue-video-player 断点续播的实现
Feb 01 Vue.js
jquery UI Datepicker时间控件的使用方法(加强版)
Nov 07 #Javascript
jquery UI Datepicker时间控件的使用方法(基础版)
Nov 07 #Javascript
jquery验证邮箱格式并显示提交按钮
Nov 07 #Javascript
jquery判断当前浏览器的实现代码
Nov 07 #Javascript
jQuery插件开发精品教程(让你的jQuery更上一个台阶)
Nov 07 #Javascript
js识别uc浏览器的代码
Nov 06 #Javascript
详解javascript数组去重问题
Nov 06 #Javascript
You might like
基于qmail的完整WEBMAIL解决方案安装详解
2006/10/09 PHP
dede3.1分页文字采集过滤规则详说(图文教程)
2007/04/03 PHP
php 文件状态缓存带来的问题
2008/12/14 PHP
Thinkphp模板中使用自定义函数的方法
2012/09/23 PHP
分享PHP header函数使用教程
2013/09/05 PHP
php实现xml与json之间的相互转换功能实例
2016/07/07 PHP
php curl获取https页面内容,不直接输出返回结果的设置方法
2019/01/15 PHP
js可突破windows弹退效果代码
2008/08/09 Javascript
jquery动态加载js三种方法实例
2013/08/03 Javascript
完美兼容IE,chrome,ff的设为首页、加入收藏及保存到桌面js代码
2014/12/17 Javascript
javascript结合CSS实现苹果开关按钮特效
2015/04/07 Javascript
jQuery实现的仿百度分页足迹效果代码
2015/10/30 Javascript
Ionic如何实现下拉刷新与上拉加载功能
2016/06/03 Javascript
分享javascript实现的冒泡排序代码并优化
2016/06/05 Javascript
jQuery实现的购物车物品数量加减功能代码
2016/11/16 Javascript
微信小程序 常用工具类详解及实例
2017/02/15 Javascript
详谈JS中数组的迭代方法和归并方法
2017/08/11 Javascript
js页面加载后执行的几种方式小结
2020/01/30 Javascript
[02:05]DOTA2完美大师赛趣味视频之看我表演
2017/11/18 DOTA
python中wx将图标显示在右下角的脚本代码
2013/03/08 Python
python魔法方法-自定义序列详解
2016/07/21 Python
Python实现求笛卡尔乘积的方法
2017/09/16 Python
解决python中导入win32com.client出错的问题
2019/07/26 Python
Opencv+Python识别PCB板图片的步骤
2021/01/07 Python
HTML5中视频音频的使用详解
2017/07/07 HTML / CSS
简单整理HTML5的基本特性和语法
2016/02/18 HTML / CSS
AmazeUI图片轮播效果的示例代码
2020/08/20 HTML / CSS
有趣、实用和鼓舞人心的产品:Inspire Uplift
2019/11/05 全球购物
编码转换,怎样实现将GB2312编码的字符串转换为ISO-8859-1编码的字符串
2014/01/07 面试题
Static Nested Class 和 Inner Class的不同
2013/11/28 面试题
安全生产先进个人材料
2014/02/06 职场文书
解除劳动合同协议书
2014/09/17 职场文书
幼儿园六一儿童节活动总结
2015/02/10 职场文书
检讨书模板大全
2015/05/07 职场文书
大学生村官驻村工作心得体会
2016/01/23 职场文书
游戏开发中如何使用CocosCreator进行音效处理
2021/04/14 Javascript