Jquery ui datepicker设置日期范围,如只能隔3天【实现代码】


Posted in Javascript onMay 04, 2016

最近的后台项目前端使用了jquery ui 日历控件自然就使用了jquery ui 的 datepicker

后台数据比较好大,一般是千万级的和百万级的关联,查询会很慢,所以后加想多加些过滤条件,其中时间要设置为必选,

产品要叫日历控件做成只能做3天之内的查询,且日历控件要做成这样的要求,如果前一个日历控制选择了2013年9月1号

后面的日历控件只能选择2013年9月1号,2013年9月2号,2013年9月3号,其他的全部要不能选,本来想叫他给提示的,领导非要这么干

真是领导一句话,码工辛苦好几年啊。。。好吧还好jquery ui 的日历控件提供了这个功能,很强大

首先去官网上(http://jqueryui.com/download/#!version=1.9.2)下载jquery ui 包 我用的是1.92版本

下载好了之后

引入:

<link href="jquery-ui/1.9.2/css/smoothness/jquery-ui-1.9.2.custom.min.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="jquery-ui/1.9.2/js/jquery-ui-1.9.2.custom.js"></script>


<script type="text/javascript" src="jquery-ui/1.9.2/datepicker-init.js"></script>



<script type="text/javascript"> 
$(function(){
 var dates = $("#startDate,#endDate");
 var option;
 var targetDate;
 var optionEnd;
 var targetDateEnd;
 dates.datepicker({
  showButtonPanel:false,
  onSelect: function(selectedDate){ 
   if(this.id == "startDate"){
   // 如果是选择了开始时间(startDate)设置结束时间(endDate)的最小时间和最大时间
   option = "minDate"; //最小时间
   var selectedTime = getTimeByDateStr(selectedDate);
   var minTime = selectedTime;
	 //最小时间 为开第一个日历控制选择的时间
   targetDate = new Date(minTime); 
   //设置结束时间的最大时间
   optionEnd = "maxDate";
	 //因为只能做三天内的查询 所以是间隔2天 当前时间加上2*24*60*60*1000
   targetDateEnd = new Date(minTime+2*24*60*60*1000);
   }else{
   // 如果是选择了结束时间(endDate)设置开始时间(startDate)的最小时间和最大时间
   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).datepicker("option", option, targetDate); 
   dates.not(this).datepicker("option", optionEnd, targetDateEnd); 
  }
 });
// 检查起始时间不能超过3天
function checkTimeInOneMonth(startDate, endDate){
	var startTime = getTimeByDateStr(startDate);
 var endTime = getTimeByDateStr(endDate);
 if((endTime - startTime) > 2*24*60*60*1000){
  return false;
 }
 return true;
}


//根据日期字符串取得其时间
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();
}
</script> <input type="text" value="" name="startDate" readonly="true" id="startDate" title="日期范围不能大于3天"/><input type="text" value="" name="endDate" readonly="true" id="endDate" title="日期范围不能大于3天"/>

以上这篇Jquery ui datepicker设置日期范围,如只能隔3天【实现代码】就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS将数字转换成三位逗号分隔的样式(示例代码)
Feb 19 Javascript
jQuery中not()方法用法实例
Jan 06 Javascript
jQuery实现新消息在网页标题闪烁提示
Jun 23 Javascript
Yarn的安装与使用详细介绍
Oct 25 Javascript
AngularJS Select(选择框)使用详解
Jan 18 Javascript
js实现返回顶部效果
Mar 10 Javascript
关于Angular2 + node接口调试的解决方案
May 28 Javascript
Web开发使用Angular实现用户密码强度判别的方法
Sep 27 Javascript
详解vue 兼容IE报错解决方案
Dec 29 Javascript
浅谈小程序 setData学问多
Feb 20 Javascript
spring+angular实现导出excel的实现代码
Feb 27 Javascript
在NPM发布自己造的轮子的方法步骤
Mar 09 Javascript
开启BootStrap学习之旅
May 04 #Javascript
JavaScript入门教程之引用类型
May 04 #Javascript
javascript和jquery实现用户登录验证
May 04 #Javascript
基于Bootstrap使用jQuery实现简单可编辑表格
May 04 #Javascript
纯JS代码实现气泡效果
May 04 #Javascript
DWR中各种java方法的调用
May 04 #Javascript
js实现div在页面拖动效果
May 04 #Javascript
You might like
浅谈PHP中JSON数据操作
2015/07/01 PHP
CodeIgniter配置之database.php用法实例分析
2016/01/20 PHP
jQuery 操作option的实现代码
2011/03/03 Javascript
Dom 结点创建 基础知识
2011/10/01 Javascript
Javascript优化技巧之短路表达式详细介绍
2015/03/27 Javascript
jQuery插件expander实现图片翻转特效
2015/05/21 Javascript
关于JS中setTimeout()无法调用带参函数问题的解决方法
2016/06/21 Javascript
关于input全选反选恶心的异常情况
2016/07/24 Javascript
从源码看angular/material2 中 dialog模块的实现方法
2017/10/18 Javascript
基于vue 实现表单中password输入的显示与隐藏功能
2019/07/19 Javascript
JS桶排序的简单理解与实现方法示例
2019/11/25 Javascript
微信小程序实现多图上传
2020/06/19 Javascript
JavaScript动画实例之粒子文本的实现方法详解
2020/07/28 Javascript
[57:16]2014 DOTA2华西杯精英邀请赛 5 25 LGD VS VG第二场
2014/05/26 DOTA
python的绘图工具matplotlib使用实例
2014/07/03 Python
在Python的gevent框架下执行异步的Solr查询的教程
2015/04/16 Python
Python正则表达式匹配中文用法示例
2017/01/17 Python
Python 列表(List) 的三种遍历方法实例 详解
2017/04/15 Python
Python处理CSV与List的转换方法
2018/04/19 Python
python面向对象多线程爬虫爬取搜狐页面的实例代码
2018/05/31 Python
Python英文文章词频统计(14份剑桥真题词频统计)
2019/10/13 Python
用python写PDF转换器的实现
2020/10/29 Python
CSS3的Border-radius轻松制作圆角
2012/12/24 HTML / CSS
农药学硕士毕业生自荐信
2013/09/25 职场文书
婚礼新郎父母答谢词
2014/01/16 职场文书
促销活动总结范文
2014/04/30 职场文书
销售团队激励口号
2014/06/06 职场文书
公务员党员评议表自我鉴定
2014/09/14 职场文书
2014县政府领导班子对照检查材料思想汇报
2014/09/25 职场文书
2014年党总支工作总结
2014/12/18 职场文书
计算机考试作弊检讨书1000字
2015/01/01 职场文书
2015年学校食堂工作总结
2015/04/22 职场文书
幼儿园推普周活动总结
2015/05/07 职场文书
大学生学生会工作总结2015
2015/05/26 职场文书
教师节联欢会主持词
2015/07/04 职场文书
2019年聘任书的写作格式及范文!
2019/07/03 职场文书