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

超、凢脫俗 2022-05-31 13:16 240阅读 0赞

一、项目需求

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页面代码

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页面部分代码