有一个业务,是有
申报时间、开题时间、中期时间、结束时间
要求每个下阶段的开始时间是上个阶段的结束时间
然而有一个单选框是否中期检查,
即单选框切换,结束时间需要重新验证
效果图
切换就变了,此时没有中期检查时间
<tr>
<td><span style="color:red">*</span>课题申报时间</td>
<td>
<input type="text" required id="startTime" οnclick="WdatePicker({dateFmt:'yyyy-MM-dd'})"class="easyui-validatebox Wdate" name="applyStartTime" value="${applyStartTime}"
onFocus="var startTime=$dp.$('#startTime');WdatePicker({onpicked:function(){$('#endTime').focus();},maxDate:'#F{$dp.$D(\'endTime\')}'})" readonly/>
-
<input type="text" id="endTime" οnclick="WdatePicker({dateFmt:'yyyy-MM-dd'})"class="easyui-validatebox Wdate" name="applyEndTime" value="${applyEndTime}" readonly
onFocus="var endTime=$dp.$('#endTime');WdatePicker({minDate:'#F{$dp.$D(\'startTime\',{d:1})}'})" required />
</td>
</tr>
<tr>
<td><span style="color:red">*</span>课题开题时间</td>
<td>
<input type="text" required id="openStartTime" οnclick="WdatePicker({dateFmt:'yyyy-MM-dd'})"class="easyui-validatebox Wdate" name="openStartTime" value="${openStartTime}"
onFocus="var openStartTime=$dp.$('#openStartTime');WdatePicker({onpicked:function(){$('#openEndTime').focus();},maxDate:'#F{$dp.$D(\'openEndTime\')}',minDate:'#F{$dp.$D(\'endTime\')}'})" readonly/>
-
<input type="text" id="openEndTime" οnchange="checkFinishStartTime()" οnclick="WdatePicker({dateFmt:'yyyy-MM-dd'})"class="easyui-validatebox Wdate" name="openEndTime" value="${openEndTime}" readonly
onFocus="var openEndTime=$dp.$('#openEndTime'); WdatePicker({minDate:'#F{$dp.$D(\'openStartTime\',{d:1})}'})" required />
</td>
</tr>
<tr>
<td>是否中期检查</td>
<td>
<c:choose>
<c:when test="${empty topicProject.id}">
是<input type="radio" onclick="changeHasMiddle('Y')" class="projectHasMiddle" name="hasMiddle" value="Y" ${topicProject.hasMiddle eq 'Y'?'checked':''}>
否<input type="radio" onclick="changeHasMiddle('N')" class="projectHasMiddle" name="hasMiddle" value="N" ${topicProject.hasMiddle eq 'N'?'checked':''}>
</c:when>
<c:otherwise>
${topicProject.hasMiddle eq 'Y'?'是':'否'}
</c:otherwise>
</c:choose>
</td>
</tr>
<tr id="middle-time-tr">
<td><span style="color:red">*</span>中期检查时间</td>
<td>
<input type="text" required id="middleStartTime" οnclick="WdatePicker({dateFmt:'yyyy-MM-dd'})"class="easyui-validatebox Wdate" name="middleStartTime" value="${middleStartTime}"
onFocus="var startTime=$dp.$('#middleStartTime');WdatePicker({onpicked:function(){$('#middleEndTime').focus();},maxDate:'#F{$dp.$D(\'middleEndTime\')}',minDate:'#F{$dp.$D(\'openEndTime\')}'})" readonly/>
-
<input type="text" id="middleEndTime" οnchange="checkFinishStartTime()" οnclick="WdatePicker({dateFmt:'yyyy-MM-dd'})"class="easyui-validatebox Wdate" name="middleEndTime" value="${middleEndTime}" readonly
onFocus="WdatePicker({minDate:'#F{$dp.$D(\'middleStartTime\',{d:1})}'})" required />
</td>
</tr>
<tr>
<td><span style="color:red">*</span>结题评审时间</td>
<td>
<%-- 这里比较特殊,使用changeMinFinishStartTime()每次点击都检查中期检查时间和单选框是否选择 --%>
<%-- 同时使用checkFinishStartTime()检查 --%>
<input type="text" required id="finishStartTime" onchange="checkFinishStartTime()" onclick="WdatePicker({dateFmt:'yyyy-MM-dd'})"
onFocus="WdatePicker({minDate:'#F{changeMinFinishStartTime()}'})"
class="easyui-validatebox Wdate" name="finishStartTime" value="${finishStartTime}"
readonly/>
-
<input type="text" id="finishEndTime" οnclick="WdatePicker({dateFmt:'yyyy-MM-dd'})"class="easyui-validatebox Wdate" name="finishEndTime" value="${finishEndTime}" readonly
onFocus="WdatePicker({minDate:'#F{$dp.$D(\'finishStartTime\',{d:1})}'})" required />
</td>
</tr>
$(document).ready(function (){
// 初始化是否中期检查,要click
$("input[name='hasMiddle'][value='${not empty topicProject.hasMiddle?topicProject.hasMiddle:'Y'}']")[0].click();
});
// 根据是否选择中期检查,而进行结题开始时间的判断,
// 当选择开题结束时间,中期结束时间,切换是否有中期时
// 对结题开始时间做判断清空
function checkFinishStartTime(){
let hasMiddle = $("input[name='hasMiddle']:checked").val();
let finishStartTime = $("#finishStartTime").val() != ''? new Date($("#finishStartTime").val()) : '';
if(hasMiddle == 'Y' && finishStartTime != ''){
if($("#middleEndTime").val() == ''){
$("#finishStartTime").val("");
return alert('请先选择中期检查时间再选择结题时间');
}
// else
let middleEndTime = new Date($("#middleEndTime").val());
if(finishStartTime < middleEndTime){
$("#finishStartTime").val("");
return alert('结题开始时间不得小于中期检查结束时间');
}
}else if(hasMiddle == 'N' && finishStartTime != ''){
if($("#openEndTime").val() == ''){
$("#finishStartTime").val("");
return alert('请先选择开题报告时间再选择结题时间');
}
// else
let openEndTime = new Date($("#openEndTime").val());
if(finishStartTime < openEndTime){
$("#finishStartTime").val("");
return alert('结题开始时间不得小于开题报告结束时间');
}
}
}
// 当选择结题开始时间时,返回可以选择的日期
// 返回:'yyyy-mm-dd'
function changeMinFinishStartTime(){
let hasMiddle = $("input[name='hasMiddle']:checked").val();
if(hasMiddle == 'Y' ){
return $("#middleEndTime").val();
}else if(hasMiddle == 'N' ){
return $("#openEndTime").val();
}else{
// 否则返回当天
var date = new Date();
var seperator1 = "-";
var year = date.getFullYear();
var month = date.getMonth() + 1;
var strDate = date.getDate();
if (month >= 1 && month <= 9) {
month = "0" + month;
}
if (strDate >= 0 && strDate <= 9) {
strDate = "0" + strDate;
}
let currentdate = year + seperator1 + month + seperator1 + strDate;
return currentdate;
}
}
function changeHasMiddle(isMiddle){
checkFinishStartTime();
if(isMiddle=='N'){
$("#middle-time-tr").hide();
}
if(isMiddle=='Y'){
$("#middle-time-tr").show();
}
}