用到时间选择器（二）之使用My97控件

总结上篇博文中的时间选择器，发现了一些需求上的问题。

虽然在以后的项目中可能用不到这样一个功能：三个文本框，第一个是请假开始时间，第二个是请假结束时间，第三个是请假天数。上篇博文的方法虽然可以获得开始结束日期，并且可以验证结束日期不能在开始日期之前，但是一时没有办法使其可以自己计算出两个日期的相差天数然后填充到第三个文本框中，总不能天数还让用户自己计算吧，最重要的是天数居然可以随便填，即使与实际的日期差值不符也依然可以，如果这样，设置这个请假天数栏就没有意义了，还有，请假应该是提前把今天之后的日期作为时间，没有必要让已经过去的时间还能作为请假时间，这样无非又是一个漏洞，引起不必要的麻烦。

基于以上验证和业务上的诸多不便，特此问了老师，老师似乎也无心纠缠于这些问题，直接抛出一个方案，即使用My97控件作为时间选择器，按他所说，这是大多是情况下做项目常用的便利控件。于是百度啊、CSDN啊、官网什么的总算摸清处了My97的使用。

项目代码编写如下：

//以下是表单验证部分

function trim(s){

return s.replace(/^\s*/,"").replace(/\s*$/,"");//去空格函数，分别去除字符串前后的空格

}

function checkatt(){

var start = trim(document.mailForm.elements['attendance.attStart'].value);//请假开始时间//这里使用了自定义的去空格函数

var end = trim(document.mailForm.elements['attendance.attEnd'].value);//请假结束时间

var days = trim(document.mailForm.elements['attendance.attDays'].value);//请假天数

var approve = trim(document.mailForm.elements['attendance.attApprove'].value);//请假批准人

var reason = trim(document.mailForm.elements['attendance.attReason'].value);//请假原因

if(start==null||start==""){

alert("开始时间不能为空！");

return false;

}

if(end==null||end==""){

alert("结束时间不能为空！");

return false;

}else if(end<=start){

alert("结束日期必须在开始日期之后！");

return false;

}

if(days==null||days==""){

alert("请假天数不能为空！");

return false;

}else if(isNaN(days)){

alert("天数只能是数字!");

return false;

}else if(days<=0||days>366){

alert("请假天数只能在1-366之间！");

return false;

}

if(approve==null||approve==""){

alert("请选择审批人！");

return false;

}

if((end-start)<0){

alert("结束日期不能再开始日期之前!")

return false;

}

if(reason.length>250){

alert("请假原因不能超过250个字符!")

return false;

}

return true;

}

//计算日期相差天数的函数

function insDays(){

var start = trim(document.mailForm.elements['attendance.attStart'].value);/*分别获得文本框选择的开始日期和结束日期、

var end = trim(document.mailForm.elements['attendance.attEnd'].value);

var days = document.mailForm.elements['attendance.attDays'];获得请假天数文本框对象 */

//此处为第一种方案

经过检验发现，通过My97控件获得的日期为字符串类型，这与datetimerpick控件不同，它获得的日期直接为日期类型；

因而涉及到了字符串转换为日期格式类型，共有三种转化方案

if(start==""||end==""){

days.value="";

days.blur();

}else{

var newd1 = new Date(start.replace(/\-/g, "\/"));/*此处一开始并非这样写,而是 var
d =new
Date(str.replace("-","/"));这样写

var newd2 =new Date(end.replace(/\-/g, "\/"));因此造成了一个后果，就是在IE中可以正确获得天数，在火狐中则是NaN，日期类型不正确，因此才会尝试另外两种写法，仍然不行，后经老师修改才能二者兼容。*/

var d=(newd2.getTime()-newd1.getTime())/(1000*24*60*60);;// replace
方法用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹 配的子串。

days.value=parseInt(d);

//alert(d);

days.blur();

}

//此为第二种方案，与第一种相同，直接这么写，在IE中可以正确运行，但在火狐里则不行

/*2 var d = start.split("-");

var oDate1 = new Date(d[1] + '-' + d[2] + '-' + d[0]) ;

var d = end.split("-");

var oDate2 = new Date(d[1] + '-' + d[2] + '-' + d[0]) ;

var day=parseInt(oDate2-oDate1)/(1000*24*60*60);

alert(oDate1);

days.value=parseInt(day);

days.blur(); */

//此为第三种方案，与前两种方案相反，此乃无奈之举最后才这么写，但后果是在火狐中可以正确运行，在IE中却又不行，我不知道这是什么原因，总之这样写不好

/* 3 var newDate1=new Date(Date.parse(start)); //parse() 方法可解析一个日期时间字符串，并返回 1970/1/1 午夜距离该日期时间的毫秒数。

var newDate2=new Date(Date.parse(end));

var day = parseInt((newDate2-newDate1)/(1000*24*60*60));

alert(newDate1);

alert(day); */

}

//js页面部分

<%

String a = "#" ; //tomacat6.0使用JSP2.1的规范,使用My97控件时如果表达式中有#回报错，故此替换解决

%>

<tr>

<td align="right" width="30%">

开始时间:

</td>

<td align="left">

<!--<sx:datetimepicker name="attendance.attStart" id="starttime" displayFormat="yyyy-MM-dd" language="UTF-8"/>-->

<input name="attendance.attStart" id="txtB" type="text" class="Wdate"

onFocus="WdatePicker({minDate:'%y-%M-<%=a%>{%d}',maxDate:'<%=a%>F{$dp.$D(\'txtE\',{d:-1})}'})"/>

<span style="color: red;font-size: 12px;" id="startSpan">*</span>

</td>

</tr>

<tr>

<td align="right" width="30%">

结束时间:

</td>

<td align="left">

<!--<sx:datetimepicker name="attendance.attEnd" id="endtime" displayFormat="yyyy-MM-dd" language="UTF-8"/>-->

<input name="attendance.attEnd" id="txtE" type="text" class="Wdate"

onFocus="WdatePicker({minDate:'<%=a%>F{$dp.$D(\'txtB\',{d:1})||\'%y-%M-<%=a%>{%d+2}\'}'})"/>

<span style="color: red;font-size: 12px;" id="endSpan">*</span>

</td>

</tr>

<tr>

<td align="right" width="30%">

请假天数:

</td>

<td align="left">

<s:textfield name="attendance.attDays" size="25" maxlength="4" onfocus="insDays()" ></s:textfield>

<span style="color: red;font-size: 12px;" id="daySpan">*</span>

</td>

</tr>

经过此番改进，不但选择日期只能在今天之后，同时结束日期不能早于开始日期，当点击请假天数的文本框时，也能根据日期直接计算出来相差天数了。