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 相关文章推荐
JavaScript面向对象编程
Mar 02 Javascript
JS仿iGoogle自定义首页模块拖拽特效的方法
Feb 13 Javascript
jQuery对JSON数据进行排序输出的方法
Jun 24 Javascript
JavaScript实现网站访问次数统计代码
Aug 12 Javascript
TypeScript Type Innference(类型判断)
Mar 10 Javascript
Bootstrap 折叠(Collapse)插件用法实例详解
Jun 01 Javascript
在JavaScript中调用Java类和接口的方法
Sep 07 Javascript
浅谈javascript的url参数parse和build函数
Mar 04 Javascript
vue货币过滤器的实现方法
Apr 01 Javascript
解决vue中监听input只能输入数字及英文或者其他情况的问题
Aug 30 Javascript
Bootstrap Table 双击、单击行获取该行及全表内容
Aug 31 Javascript
迅速了解一下ES10中Object.fromEntries的用法使用
Mar 05 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实现扫描二维码根据浏览器类型访问不同下载地址
2014/10/15 PHP
Linux系统下PHP-FPM的安装和配置教程
2015/08/17 PHP
php常用数组array函数实例总结【赋值,拆分,合并,计算,添加,删除,查询,判断,排序】
2016/12/07 PHP
php四种定界符详解
2017/02/16 PHP
PHPUnit测试私有属性和方法功能示例
2018/06/12 PHP
PHP基于mcript扩展实现对称加密功能示例
2019/02/21 PHP
将文本输入框内容加入表中的js代码
2013/08/18 Javascript
通过遮罩层实现浮层DIV登录的js代码
2014/02/07 Javascript
jquery库或JS文件在eclipse下报错问题解决方法
2014/04/17 Javascript
AngularJS中取消对HTML片段转义的方法例子
2015/01/04 Javascript
JavaScript分页功能的实现方法
2015/04/25 Javascript
javascript实现控制的多级下拉菜单
2015/07/05 Javascript
Bootstrap每天必学之进度条
2015/11/30 Javascript
你不需要jQuery(三) 新AJAX方法fetch()
2016/06/14 Javascript
用jQuery实现优酷首页轮播图
2017/01/09 Javascript
javascript设计模式之策略模式学习笔记
2017/02/15 Javascript
使用Vue-Router 2实现路由功能实例详解
2017/11/14 Javascript
vue写h5页面的方法总结
2019/02/12 Javascript
linux 下以二进制的方式安装 nodejs
2020/02/12 NodeJs
微信小程序仿抖音视频之整屏上下切换功能的实现代码
2020/05/24 Javascript
Vue封装全局过滤器Filters的步骤
2020/09/16 Javascript
pycharm+PyQt5+python最新开发环境配置(踩坑)
2019/02/11 Python
Python中三元表达式的几种写法介绍
2019/03/04 Python
在Django中预防CSRF攻击的操作
2020/03/13 Python
Python ArgumentParse的subparser用法说明
2020/04/20 Python
俄罗斯鲜花递送:AMF
2020/04/24 全球购物
普通党员对照检查材料
2014/09/24 职场文书
干部作风建设心得体会
2014/10/22 职场文书
2015年公民道德宣传日活动总结
2015/03/23 职场文书
2015年上半年物业工作总结
2015/03/30 职场文书
单位考核鉴定意见
2015/06/05 职场文书
开业典礼致辞
2015/07/29 职场文书
2016秋季运动会开幕词
2016/03/04 职场文书
创业计划书之餐饮
2019/09/02 职场文书
Python re.sub 反向引用的实现
2021/07/07 Python
微信小程序APP页面的之间的相互传递参数以及自定义组件
2022/04/19 Javascript