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 获取url参数和script标签中获取url参数函数代码
Jan 22 Javascript
Extjs中常用表单介绍与应用
Jun 07 Javascript
jquery拖动层效果插件用法实例分析(附demo源码)
Apr 28 Javascript
Javascript简写条件语句(推荐)
Jun 12 Javascript
json格式的javascript对象用法分析
Jul 04 Javascript
Javascript 基础---Ajax入门必看
Jul 06 Javascript
Vue下的国际化处理方法
Dec 18 Javascript
使用Angular CLI进行Build(构建)和Serve详解
Mar 24 Javascript
node命令行工具之实现项目工程自动初始化的标准流程
Aug 12 Javascript
微信小程序后端(java)开发流程的详细步骤
Nov 13 Javascript
微信小程序实现页面左右滑动
Nov 16 Javascript
使用Ajax实现无刷新上传文件
Apr 12 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
Cannot modify header information错误解决方法
2008/10/08 PHP
php面向对象全攻略 (十五) 多态的应用
2009/09/30 PHP
php学习笔记(三)操作符与控制结构
2011/08/06 PHP
PHP入门之常量简介和系统常量
2014/05/12 PHP
PHP+HTML+JavaScript+Css实现简单爬虫开发
2016/03/28 PHP
Laravel 前端资源配置教程
2019/10/18 PHP
Jquery实战_读书笔记1—选择jQuery
2010/01/22 Javascript
用JS判别浏览器种类以及IE版本的几种方法小结
2011/08/02 Javascript
Javascript this 的一些学习总结
2012/08/31 Javascript
ie支持function.bind()方法实现代码
2012/12/27 Javascript
jQuery调用AJAX时Get和post公用的乱码解决方法实例说明
2013/06/04 Javascript
高效率JavaScript编写技巧整理
2013/08/23 Javascript
获取下拉列表框的值是数组,split,$.inArray示例
2013/11/13 Javascript
Backbone.js的Hello World程序实例
2015/06/19 Javascript
JS定时器使用,定时定点,固定时刻,循环执行详解
2016/05/31 Javascript
JS图片左右无缝隙滚动的实现(兼容IE,Firefox 遵循W3C标准)
2016/09/23 Javascript
Vue.js 图标选择组件实践详解
2018/12/03 Javascript
vue搜索页开发实例代码详解(热门搜索,历史搜索,淘宝接口演示)
2020/04/11 Javascript
vue实现页面切换滑动效果
2020/06/29 Javascript
wxpython 学习笔记 第一天
2009/03/16 Python
python中使用pyhook实现键盘监控的例子
2014/07/18 Python
Python字符串和文件操作常用函数分析
2015/04/08 Python
python optparse模块使用实例
2015/04/09 Python
Tensorflow简单验证码识别应用
2017/05/25 Python
深入理解python中sort()与sorted()的区别
2018/08/29 Python
Python openpyxl读取单元格字体颜色过程解析
2019/09/03 Python
PYTHON如何读取和写入EXCEL里面的数据
2019/10/28 Python
Python全局变量与global关键字常见错误解决方案
2020/10/05 Python
python 基于selectors库实现文件上传与下载
2020/12/31 Python
《尊严》教学反思
2014/02/11 职场文书
信息学院毕业生自荐信范文
2014/03/04 职场文书
《草原的早晨》教学反思
2014/04/08 职场文书
志愿者事迹材料
2014/12/26 职场文书
博士生专家推荐信
2015/03/25 职场文书
python 如何获取页面所有a标签下href的值
2021/05/06 Python
js 数组 fill() 填充方法
2021/11/02 Javascript