使用easyui和My97DatePicker进行多个时间限制以及回调

有一个业务,是有
申报时间、开题时间、中期时间、结束时间
要求每个下阶段的开始时间是上个阶段的结束时间
然而有一个单选框是否中期检查,
即单选框切换,结束时间需要重新验证

效果图
请添加图片描述
切换就变了,此时没有中期检查时间切换就变了

				<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':''}> &nbsp;&nbsp;<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();
        }
    }
 
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值