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 相关文章推荐
jQuery与ExtJS之选择实例分析
Aug 19 Javascript
基于jQuery的淡入淡出可自动切换的幻灯插件
Aug 24 Javascript
jquery $.ajax相关用法分享
Mar 16 Javascript
jQuery实现对无序列表的排序功能(附demo源码下载)
Jun 25 Javascript
Select下拉框模糊查询功能实现代码
Jul 22 Javascript
js前端实现多图图片上传预览的两个方法(推荐)
Nov 18 Javascript
Html5+jQuery+CSS制作相册小记录
Dec 30 Javascript
AngularJS实现的回到顶部指令功能实例
May 17 Javascript
微信小程序 共用变量值的实现
Jul 12 Javascript
你可能不知道的前端算法之文字避让(inMap)
Jan 12 Javascript
jquery检测上传文件大小示例
Apr 26 jQuery
使用refresh_token实现无感刷新页面
Apr 26 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
在Windows中安装Apache2和PHP4的权威指南
2006/10/09 PHP
使用PHP Socket写的POP3类
2013/10/30 PHP
PHP生成sitemap.xml地图函数
2013/11/13 PHP
zf框架的zend_cache缓存使用方法(zend框架)
2014/03/14 PHP
php获取访问者IP地址汇总
2015/04/24 PHP
WordPress中用于获取文章作者与分类信息的方法整理
2015/12/17 PHP
PHP cookie,session的使用与用户自动登录功能实现方法分析
2019/06/05 PHP
Javascript 构造函数详解
2014/10/22 Javascript
jQuery实现类似淘宝网图片放大效果的方法
2015/07/08 Javascript
jquery实现全选、不选、反选的两种方法
2016/09/06 Javascript
JavaScript判断变量名是否存在数组中的实例
2017/12/28 Javascript
nodejs 简单实现动态html的方法
2018/05/12 NodeJs
浅谈angular表单提交中ng-submit的默认使用方法
2018/09/30 Javascript
javascript实现计算指定范围内的质数示例
2018/12/29 Javascript
Vue事件处理原理及过程详解
2020/03/11 Javascript
Vue中key的作用示例代码详解
2020/06/10 Javascript
js实现拖拽元素选择和删除
2020/08/25 Javascript
微信小程序中target和currentTarget的区别小结
2020/11/06 Javascript
python使用wxPython打开并播放wav文件的方法
2015/04/24 Python
python将每个单词按空格分开并保存到文件中
2018/03/19 Python
解决Pycharm无法import自己安装的第三方module问题
2018/05/18 Python
利用Python自动化操作AutoCAD的实现
2020/04/01 Python
重写django的model下的objects模型管理器方式
2020/05/15 Python
Python在centos7.6上安装python3.9的详细教程(默认python版本为2.7.5)
2020/10/15 Python
详解pandas apply 并行处理的几种方法
2021/02/24 Python
基于html5 canvas实现漫天飞雪效果实例
2014/09/10 HTML / CSS
汇科协同Java笔试题
2012/03/31 面试题
在校大学生的职业生涯规划书
2014/03/14 职场文书
股东协议书
2014/04/14 职场文书
工伤赔偿协议书
2014/04/15 职场文书
机关作风建设自查报告
2014/10/22 职场文书
总经理岗位职责
2015/02/04 职场文书
幼儿园小班教师个人工作总结
2015/02/06 职场文书
汉字听写大会观后感
2015/06/12 职场文书
2016年万圣节活动总结
2016/04/05 职场文书
「玫瑰之王的葬礼」舞台剧主视觉图公开
2022/03/21 日漫