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:disableDate//限制所有的日期，关键的一步，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>