时间输入框校验通用

来源：互联网发布：js与jsp的区别编辑：程序博客网时间：2024/06/18 10:54

1.日期组件下载

My97DatePickerBeta官方下载地址：http://www.my97.net/dp/down/My97DatePickerBeta.zip

解压后放入项目中即可

2.引入日期组件js

3.html代码

<ul class="clr_wrap">  <li>        <label>下单时间</label>        <input class="date_text w_120" type="text" id="createTmBeginStr" name="createTmBeginStr" onClick="WdatePicker({onpicked:function(dp){beginEndDt('createTmBeginStr','createTmEndStr');},dateFmt:'yyyy-MM-dd',autoPickDate:true,maxDate:'%y-%M-%d'})" placeholder="开始时间"/>        —        <input class="date_text w_120" type="text" id="createTmEndStr" name="createTmEndStr" onClick="WdatePicker({dateFmt:'yyyy-MM-dd',autoPickDate:true,minDate:'#F{$dp.$D(\'createTmBeginStr\')}',maxDate:'%y-%M-%d'});" placeholder="结束时间"/>    </li>    <li>        <input id="btnSearch" onclick="searchInformations(1);" class="red_btn2" type="button" value="查询">    </li></ul>

4.备注

需要去除最大时间限制时，只需将maxDate的值设为''即可：maxDate:''

5.效果图如下：

6.后台sql注意点

（1）本文中数据库为mysql数据库，持久层框架为MyBatis

（2）比较时间大小时，首先需要使用cdata对特殊字符进行转义，作用是将特殊字符处理为纯文本进行保存

（3）使用DATE_FORMAT对时间进行统一格式化

示例代码如下：

<where><if test="createTmBegin != null and createTmBegin != ''">AND  DATE_FORMAT(A.CREATE_TM, '%y-%m-%d') <![CDATA[>=]]> DATE_FORMAT( #{createTmBegin}, '%y-%m-%d')</if><if test="createTmEnd != null and createTmEnd != ''">AND  DATE_FORMAT(A.CREATE_TM, '%y-%m-%d') <![CDATA[<=]]> DATE_FORMAT( #{createTmEnd}, '%y-%m-%d')</if></where>

这样就能保证区间都选择同一天时间时，能够筛选出那一天的数据

1 0