使用Jquery EasyUI中DateTimeBox控件设置考试开始结束时间,并对其验证
2015-07-28 16:41
801 查看
首先是html页面编写,主要代码:
然后是加校验,校验函数如下:
执行校验函数:
<td style="width: 25%;text-align:center;"> <span i18nName="exa_arr_time" class="i18n" style="width: 24%;text-align:right;"></span> </td> <td style="width: 75%;text-align:left;"> <input id="arr_startTime" style="width:130px;" class="easyui-datetimebox" data-options="required:true,showSeconds:false" editable="false" missingMessage="该项必须填写"></input> ~<input id="arr_endTime" style="width:130px;" class="easyui-datetimebox" data-options="required:true,showSeconds:false" editable="false" missingMessage="该项必须填写"></input> </td> </tr> <tr> <td style="width: 25%;text-align:center"></td> <td style="width: 269px;text-align:right"> </td> </tr>
然后是加校验,校验函数如下:
function CompareTime(start,end){ var sarry = new Array(); var earry = new Array(); sarry = start.split(' '); earry = end.split(' '); var arrStartDate = sarry[0].split("-"); var arrEndDate = earry[0].split("-"); var arrStartTime = sarry[1].split(":"); var arrEndTime = earry[1].split(":"); var allStartDate = new Date(arrStartDate[0], arrStartDate[1]-1, arrStartDate[2], arrStartTime[0], arrStartTime[1]); var allEndDate = new Date(arrEndDate[0], arrEndDate[1]-1, arrEndDate[2], arrEndTime[0], arrEndTime[1]); var sdate = new Date(arrStartDate[0], arrStartDate[1], arrStartDate[2]); var edate = new Date(arrEndDate[0], arrEndDate[1], arrEndDate[2]); var shour = parseInt(arrStartTime[0]);//获取小时 var ehour = parseInt(arrEndTime[0]); var smin = parseInt(arrStartTime[1]);//获取分钟 var emin = parseInt(arrEndTime[1]); var today = new Date(); if((allStartDate.getTime()+600000) < today.getTime() || (allEndDate.getTime()+600000) < today.getTime()){ $('#arr_startTime').datetimebox({ missingMessage:"开考时间必须大于当前时间" }); $('#arr_endTime').datetimebox({ missingMessage:"结束时间必须大于当前时间" }); return false; }else if(allStartDate.getTime() < allEndDate.getTime()) { if(sdate.getTime() == edate.getTime()){ if((ehour-shour) > e_time){ $('#msg').html("提示:您所设定的考试时间超过"+e_time+"小时"); $('#msg').css('display','inline'); return true; } if(ehour==shour){ if(emin < (smin+5)){ $('#arr_endTime').datetimebox({ missingMessage:"您所设的考试时间小于5分钟" }); return false; } if(emin <= smin){ $('#arr_endTime').datetimebox({ missingMessage:"结束时间不能小于开考时间" }); return false; }else{ return true; } } if(ehour < shour){ $('#arr_endTime').datetimebox({ missingMessage:"结束时间不能小于开考时间" }); return false; } }else{ $('#msg').html("提示:您所设定的考试时间超过"+e_time+"小时"); $('#msg').css('display','inline'); return true; } }else{ $('#arr_endTime').datetimebox({ missingMessage:"结束时间不能小于开考时间" }); return false; } return true; }
执行校验函数:
var start = $('#arr_startTime').datetimebox('getValue').toString(); var end = $('#arr_endTime').datetimebox('getValue').toString(); $('#msg').css('display','none'); var flag=CompareTime(start,end); if(!flag){ return false; }
相关文章推荐
- jquery移除select下所有的option选项
- js、jquery、动态添加option项
- jquery
- 简单的jQuery入门指引
- JQuery EasyUI只显示年月,而不显示日
- jq的json插件使用总结(jquery.json.min.js)
- jquery.ajax()参数
- 使用Browserify配合jQuery进行编程的超级指南
- jQuery
- jQuery缓存数据——仿Map
- jquery 选择器
- Javascript、Jquery获取浏览器和屏幕各种高度宽度
- jquery在某种情况下绑定click事件会触发多次click的解决方案
- jquery手册
- jQuery插件的开发
- jquery toggle() 方法 切换元素
- jQuery中的.bind()、.live()和.delegate()之间区别分析(转)
- jquery lazyload
- jQuery选择
- [转]ASP.NET MVC Jquery Validate 表单验证的多种方式介绍