这篇文章主要介绍“Jquery ui datepicker如何设置日期范围”，在日常操作中，相信很多人在Jquery ui datepicker如何设置日期范围问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”Jquery ui datepicker如何设置日期范围”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！
创新互联专业网站建设、网站制作，集网站策划、网站设计、网站制作于一体，网站seo、网站优化、网站营销、软文发布平台等专业人才根据搜索规律编程设计，让网站在运行后，在搜索中有好的表现，专业设计制作为您带来效益的网站！让网站建设为您创造效益。
首先去官网上下载jquery ui 包 我用的是1.92版本
下载好了之后
引入：
$(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();
}
到此，关于“Jquery ui datepicker如何设置日期范围”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注创新互联网站，小编会继续努力为大家带来更多实用的文章！
当前文章：Jqueryuidatepicker如何设置日期范围
网页URL：
http://bjjierui.cn/article/jodosp.html
