日期选择器的使用

ChargeList.jsp

1.导入js文件:

<head>

<link href="<%=request.getContextPath()%>/manage/Css/bootstrap.css" rel="stylesheet" media="screen">
    <%-- <link href="<%=request.getContextPath()%>/manage/Css/bootstrap-datetimepicker.min.css" rel="stylesheet" media="screen"> --%>
    <link rel="stylesheet" type="text/css" href="<%=request.getContextPath() %>/datepicker/datetimepicker.css" />
<link rel="stylesheet" type="text/css"
href="<%=request.getContextPath()%>/manage/Css/style.css" />

<title>查询</title>

<script type="text/javascript" src="<%=request.getContextPath()%>/manage/Js/jquery.js" charset="UTF-8"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/manage/Js/bootstrap.min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/datepicker/bootstrap-datetimepicker.js" charset="UTF-8"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/datepicker/bootstrap-datetimepicker.zh-CN.js" charset="UTF-8"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/manage/Js/jquery.validate.min.js"></script>
<script type="text/javascript"
src="<%=request.getContextPath()%>/manage/Js/common.js"></script>

</head>


2.日期输入框:

<tr>
<td width="10%" class="tableleft">&nbsp;&nbsp;开始日期:</td>
<td>
<div id="date-begin"
class="input-append date form_date queryComponent"
data-link-field="dtp_input1" data-date-format="yyyy-mm-dd"
data-date="" data-startDate="${startTime }">
<input name="query1" id="query1" size="16" type="text"
value="${startTime }" readonly=""> <span class="add-on"><i
class="icon-remove"></i></span> <span class="add-on"><i
class="icon-calendar"></i></span>
</div>
</td>

<td width="10%" class="tableleft">&nbsp;&nbsp;结束日期:</td>
<td>
<div id="date-end"
class="input-append date form_date queryComponent"
data-link-field="dtp_input2" data-date-format="yyyy-mm-dd"
data-date=""  data-endDate="${endTime }">
<input name="query2" id="query2" size="16" type="text"
value="${endTime }" readonly=""> <span class="add-on"><i
class="icon-remove"></i></span> <span class="add-on"><i
class="icon-calendar"></i></span>
</div>
</td>
</tr>


3.Script校验脚本:

  <script>
$("#table_validate").validate({
   rules:{
       query1:{
           maxlength: 64,
                      
       },
       query2:{
           maxlength: 64,            
       },
       query3:{
           maxlength: 11,
           minlength: 11,
           digits: true
       },
   }
});

$('#date-begin').datetimepicker({
        language: 'zh-CN',
        weekStart: 1,
        todayBtn: 1,
        autoclose: 1,
        todayHighlight: 1,
        startView: 2,
        minView: 2,
        endDate: $('#date-end').attr('data-endDate')||new Date()
    }).on('changeDate', function(ev){
        if(ev.date){
            //ev.date.setHours(ev.date.getHours()-8)
            var chooseDate =new Date($(this).find('input[type="text"]').val())


            var currentYear = chooseDate.getFullYear();
            var currentMonth = chooseDate.getMonth()+1;
            var currentDate = chooseDate.getDate();
            if(this.id=="date-begin"){
                $('.form_date').not('#'+this.id).datetimepicker('setStartDate',currentYear+'-'+ currentMonth +'-' + currentDate).datetimepicker('setEndDate',new Date())
            }else{
                $('#date-begin').datetimepicker('setStartDate',null).datetimepicker('setEndDate', currentYear+'-'+ currentMonth +'-' + currentDate)
            }
        }
    });
    
$('#date-end').datetimepicker({
        language: 'zh-CN',
        weekStart: 1,
        todayBtn: 1,
        autoclose: 1,
        todayHighlight: 1,
        startView: 2,
        minView: 2,
        startDate: $('#date-begin').attr('data-startDate')||null,
        endDate: new Date()
    }).on('changeDate', function(ev){
        if(ev.date){
            //ev.date.setHours(ev.date.getHours()-8)
            var chooseDate =new Date($(this).find('input[type="text"]').val())


            var currentYear = chooseDate.getFullYear();
            var currentMonth = chooseDate.getMonth()+1;
            var currentDate = chooseDate.getDate();
            if(this.id=="date-begin"){
                $('.form_date').not('#'+this.id).datetimepicker('setStartDate',currentYear+'-'+ currentMonth +'-' + currentDate).datetimepicker('setEndDate',new Date())
            }else{
                $('#date-begin').datetimepicker('setStartDate',null).datetimepicker('setEndDate', currentYear+'-'+ currentMonth +'-' + currentDate)
            }
        }
    })


</script>
</body>
</html>



后台处理:

String phone = null;
String startTime = null;
String endTime = null;
String status = null;



startTime = CharacterUtil.getStringFromRequest(request, "query1");
endTime = CharacterUtil.getStringFromRequest(request, "query2");
phone = CharacterUtil.getStringFromRequest(request, "query3");
status      = CharacterUtil.getStringFromRequest(request, "query4");



  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值