这篇文章主要介绍“Jquery ui datepicker如何设置日期范围”,在日常操作中,相信很多人在Jquery ui datepicker如何设置日期范围问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”Jquery ui datepicker如何设置日期范围”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!
首先去官网上下载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如何设置日期范围”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注亿速云网站,小编会继续努力为大家带来更多实用的文章!
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。
原文链接:https://www.zhuxianfei.com/jishu/js/5438.html