[置顶] my97DatePicker日历控件限制已经选择的日期（ssh项目请假日期的限制）

一、项目需求

ssh项目中关于请假日期的限制：
比如：已有请假条2018年2月26至2018年2月28日，那么该职员再次请假时，日历控件中的2月26日、2月27日和2月28日三天会被限制选择，呈现灰色不可选状。
二、环境
前端用到jsp页面和Struts2标签，js主要用jqery实现，日历控件my97DatePicker，数据库总关联的字段主要是开始时间starttime和结束时间endtime
三、设计思路
1、ajax提交来获取数据库中该职员的请假条的集合，分别放在stimes和etimes集合，（注意：回调函数获取的是字符串，所以传递的时候应该将stimes和etimes集合构造成字符串，在回调函数中在将字符串拆分出来存入数组中stiem和etime中）；
2、js中构造一个带参的function，参数为数组中相同下标的stiem[i]和etime[i]，功能主要实现请假的开始时间和结束时间之间的每一个日期，将其存入数组中，循环结束后返回该数组就是该请假日期的每一个日期。（注意：字符串的拆分和拼接，多次会用到，还有就是时间的格式不能乱）
四、具体代码
1、action层代码
public class VacationAction extends BaseAction{//BaseAction继承了ActionSupport
private List<Vacation> vacations;
private Map<Vacation> resultMap=new HashMap<Vacation>();
//get/set方法……
public String getVacationsTime(){
User loginUser=(User) ActionContext.getContext().getSession().get("loginUser");//获取当前用户
try {
vacations = vacationService.getVacationByApplicant(loginUser.getId());//自定义getVacationByApplicant()获取当前用户的所有请假条
String stimes="";
String etimes="";//构造2个字符串用来存放每个请假条的开始时间和结束时间，注意要一一对应
for(int i=0;i<vacations.size();i++){
SimpleDateFormat sdf=new SimpleDateFormat("yyyy-MM-dd");
String startTime=sdf.format(vacations.get(i).getStartTime());
String endTime=sdf.format(vacations.get(i).getEndTime());
if(stimes!="" && stimes!=null){//拼接开始时间和结束时间的字符串，用于传递到用户端
stimes+=",";
}
stimes+=startTime;
if(etimes!="" && etimes!=null){
etimes+=",";
}
etimes+=endTime;
}
resultMap.put("stimes",stimes);
resultMap.put("etimes",etimes);
log.error("method getVacations is successful");
} catch (Exception e) {
e.printStackTrace();
log.error("method getVacations bug:{}",e);
}
return SUCCESS;//成功返回success（SUCCESS是定义的工具类属性）
}
}
2、JS页面代码
<script type="text/javascript">
$(function(){
var stimeArray=new Array();
var etimeArray=new Array();
var disableDate=new Array();
//得到数据库中stime和etime，构造数组
$(document).ready(function(){
var url="${ctx}/getVacationsTime.action";
$.post(
url,
function(data){
/* alert(data.stimes);
alert(data.etimes); */
stimeArray=data.stimes.split(",");
etimeArray=data.etimes.split(",");
var index=0;
for(var i=0;i<stimeArray.length;i++){//遍历每个vacation的开始时间和结束时间
var stime=new Date(stimeArray[i]).dateFormat();
var etime=new Date(etimeArray[i]).dateFormat();
stimeArray[i]=stime;
etimeArray[i]=etime;
var arr=getAll(stime,etime);//调用自定义getAll()方法，获取该vacation开始时间和结束时间之间所有的日期
for(var j=0;j<arr.length;j++){//遍历getAll（）所有的日期，放到disableDate数组中
disableDate[index]=arr[j];
index+=1;
}
}
/* alert(disableDate.toString()); */ //测试是否选择到所有日期
}
);
});
$("#stime").click(function(){//开始时间日历控件的单击事件
WdatePicker({
skin:'whyGreen',
dateFmt:'yyyy-MM-dd',
minDate:'%y-%M-%d',//限制今天之前的日期
maxDate:'#F{$dp.$D(\'etime\')||\'2020-10-01\'}',//注意etime是结束时间的id，改成你的结束时间id
disabledDays:[0,6],//限制周六和周日，不需要限制就不用写
disabledDates:disableDat
a3af
e//限制所有的日期，关键的一步，disableDate数组就是忙活半天从数据库查找出来之后选择的所有请假日期
});
});
$("#etime").click(function(){//结束时间日历控件的单击事件
WdatePicker({
skin:'whyGreen',
dateFmt:'yyyy-MM-dd',
minDate:'#F{$dp.$D(\'stime\')}',//注意stime是开始时间的id，改成你的结束时间id
maxDate:'2020-10-01',//限制最大有效时间
disabledDays:[0,6],//限制周六和周日，不需要限制就不用写
disabledDates:disableDate//限制所有的日期，关键的一步，disableDate数组就是忙活半天从数据库查找出来之后选择的所有请假日期
});
});
//获取begin和end之间所有的日期格式化函数
Date.prototype.dateFormat = function() {

var s = '';
var mouth = (this.getMonth() + 1)>=10?(this.getMonth() + 1):('0'+(this.getMonth() + 1));
var day = this.getDate()>=10?this.getDate():('0'+this.getDate());
s += this.getFullYear() + '-'; // 获取年份。
s += mouth + "-"; // 获取月份。
s += day; // 获取日。
return (s); // 返回日期。
};
//获取begin和end之间所有的日期函数
function getAll(begin, end) {
      var arr=new Array();
var ab = begin.split("-");
var ae = end.split("-");
var db = new Date();
db.setUTCFullYear(ab[0], ab[1] - 1, ab[2]);
var de = new Date();
de.setUTCFullYear(ae[0], ae[1] - 1, ae[2]);
var unixDb = db.getTime();
var unixDe = de.getTime();
var i=0;
for (var k = unixDb; k <= unixDe;) {
/* console.log((new Date(parseInt(k))).dateFormat()); */
arr[i]=(new Date(parseInt(k))).dateFormat();
i+=1;
k = k + 24 * 60 * 60 * 1000;
}
return arr;
}
</script> 

3、jsp页面部分代码
<table width="90%" border="0" cellspacing="0" cellpadding="0">
<tr >
<td align="right" >开始时间：</td><td align="left">
<s:textfield id="stime" name="vacation.startTime" class="Wdate" />
</td>
</tr>
<tr >
<td align="right" >结束时间：</td><td align="left">
<s:textfield id="etime" name="vacation.endTime" class="Wdate" />
</td>
</tr>

</table>