日期时间

    xiaoxiao2021-03-25  34

    <!DOCTYPE html> <html> <head>     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />     <title>日期</title>     <link href="../static/css/bootstrap.min.css" rel="stylesheet" charset="UTF-8" media="screen">     <link href="../static/css/bootstrap-datetimepicker.min.css" rel="stylesheet" charset="UTF-8" media="screen"> </head> <body> <div class="container">     <form action="" class="form-horizontal"  role="form">         <fieldset>             <legend>Test</legend>             <div class="form-group">                 <label for="dtp_input1" class="col-md-2 control-label">日期时间</label>                 <div class="input-group date form_datetime col-md-5" data-date="" data-date-format="yyyy-mm-dd hh:ii" data-link-field="dtp_input1">                     <input class="form-control" size="16" type="text" value="" readonly="readonly"   >                     <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span> <span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>                 </div> <input type="hidden" id="dtp_input1" value="" /><br/>             </div> <hr></hr> <div class="form-group">                 <label for="dtp_input2" class="col-md-2 control-label">开始日期</label>                 <div class="input-group date form_date col-md-5" data-date="" id="dtp_input21" data-date-format="yyyy-mm-dd" data-link-field="dtp_input2" data-link-format="yyyy-mm-dd">                     <input class="form-control" size="16" type="text" value="" readonly>                     <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span> <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>                 </div> <input type="hidden" id="dtp_input2" value="" /><br/>             </div> <div class="form-group">                 <label for="dtp_input2" class="col-md-2 control-label">结束日期</label>                 <div class="input-group date form_date col-md-5" data-date="" id="dtp_input31" data-date-format="yyyy-mm-dd" data-link-field="dtp_input3" data-link-format="yyyy-mm-dd" ">                     <input class="form-control" size="16" type="text" value="" readonly ">                     <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span> <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>                 </div> <input type="hidden" id="dtp_input3" value="" /><br/>             </div> <hr></hr> <div class="form-group">                 <label for="dtp_input3" class="col-md-2 control-label">时间</label>                 <div class="input-group date form_time col-md-5" data-date="" data-date-format="hh:ii" data-link-field="dtp_input3" data-link-format="hh:ii">                     <input class="form-control" size="16" type="text" value="" readonly>                     <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span> <span class="input-group-addon"><span class="glyphicon glyphicon-time"></span></span>                 </div> <input type="hidden" id="dtp_input3" value="" /><br/>             </div>         </fieldset>     </form> <hr></hr> </div> <div style="float: right; margin-right: 30px;margin-top: -10px"> <button class="btn btn-primary" id="search">查询</button> </div> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true"> × </button> <h4 class="modal-title" id="myModalLabel"> 提示: </h4> </div> <div class="modal-body"> 开始日期应小于结束日期,请检查! </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">关闭 </button> </div> </div><!-- /.modal-content --> </div><!-- /.modal --> </div> <script type="text/javascript" src="../static/js/static/jquery-3.1.1.min.js" charset="UTF-8"></script> <script type="text/javascript" src="../static/js/static/bootstrap.min.js"></script> <script type="text/javascript" src="../static/js/static/bootstrap-datetimepicker.js" charset="UTF-8"></script> <script type="text/javascript" src="../static/js/static/bootstrap-datetimepicker.zh-CN.js" charset="UTF-8"></script> <script type="text/javascript">     $('.form_datetime').datetimepicker({         language:  'zh-CN',         weekStart: 1,         todayBtn:  1, autoclose: 1, todayHighlight: 1, startView: 2, forceParse: 0,         showMeridian: 1     }); $('.form_date').datetimepicker({         language:  'zh-CN',         weekStart: 1,         todayBtn:  1, autoclose: 1, todayHighlight: 1, startView: 2, minView: 2, forceParse: 0     }); $('.form_time').datetimepicker({          language:  'zh-CN',         weekStart: 1,         todayBtn:  1, autoclose: 1, todayHighlight: 1, startView: 1, minView: 0, maxView: 1, forceParse: 0     }); ;(function($){     $.fn.datetimepicker.dates['zh-CN'] = {         days: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六", "星期日"],         daysShort: ["周日", "周一", "周二", "周三", "周四", "周五", "周六", "周日"],         daysMin:  ["日", "一", "二", "三", "四", "五", "六", "日"],         months: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],         monthsShort: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],         today: "今日",         suffix: [],         meridiem: [],         weekStart: 1,     }; }(jQuery)); </script> <script> $("#search").click(function() { var startTime = $("#dtp_input2").val();         var endTime = $("#dtp_input3").val();    var data1 = Date.parse(startTime.replace(/-/g,   "/"));    var data2 = Date.parse(endTime.replace(/-/g,   "/"));    var datadiff = data2-data1;    var time = 60*24*60*60*1000; if(startTime.length>0 && endTime.length>0){          if(datadiff<0){ $('#myModal').modal({ show:true, backdrop:true          })             return false;          } } }) </script> </body> </html>
    转载请注明原文地址: https://ju.6miu.com/read-50183.html

    最新回复(0)