官方文档:http://www.bootcss.com/p/bootstrap-datetimepicker/
.datetimepicker() 放在jsp页面的 后面,以确保在其他js代码后面加载
代码:
<td class="row"> <div class="col-xs-7 col-md-5 col-lg-3"> <div id="startdatepicker" class="input-append date start_datetime" style="width:200px" valign=middle> <input size="16" type="text" value="2018-03-20 00:00:00.000" readonly="true" placeholder="开始时间" name="starttime" style="width:145px;line-height:28px"> <span class="add-on"><i class="icon-remove"></i></span> <span class="add-on"><i class="icon-th"></i></span> </div> </div> <div class="col-md-5"> <div id="enddatepicker" class="input-append date end_datetime"> <input id="endTime" size="16" type="text" value="" readonly="true" placeholder="结束时间" name="endtime" style="width:145px;line-height:28px"> <span class="add-on"><i class="icon-remove"></i></span> <span class="add-on"><i class="icon-th"></i></span> </div> </div> </td>
js:
页面头部:(貌似bootstrap-datetimepicker-zh-CN.js用来汉化就足够了;
汉化参考文档:https://www.cnblogs.com/javawer/p/4169837.html)
moment-zh-CN 地址:https://cdn.bootcss.com/moment.js/2.22.0/locale/zh-cn.js
<link rel="stylesheet/less" type="text/css" href="/themes/less/skin.less"> <link rel="stylesheet/less" type="text/css" href="/themes/less/datetimepicker.less"> <link rel="stylesheet" type="text/css" href="/themes/common/bootstrap.css"> <link rel="stylesheet" type="text/css" href="/themes/common/bootstrap-datetimepicker.css"> <link rel="stylesheet" type="text/css" href="/themes/common/bootstrap-datetimepicker.min.css" /> <!-- 公共JS --> <script type="text/javascript" src="/controls/jquery/jquery-1.8.2.min.js"></script> <script type="text/javascript" src="/scripts/scripts.js"></script> <script type="text/javascript" src="/controls/jquery/jquery-ui-1.10.3.js"></script> <script src="/controls/require/require.js"></script> <script src="/scripts/main.js"></script> <%--时间日期选择器--%> <script type="text/javascript" src="/controls/bootstrap/bootstrap.js"> </script> <script type="text/javascript" src="/controls/bootstrap/moment.js"> </script> <script type="text/javascript" src="/controls/bootstrap/moment_zh_CN.js"> </script> <script type="text/javascript" src="/controls/bootstrap/bootstrap-datetimepicker.js"> </script> <script type="text/javascript" src="/controls/bootstrap/bootstrap-datetimepicker.zh-CN.js"> </script>尾部:
$(".start_datetime").datetimepicker({ format: 'yyyy-MM-dd hh:mm:ss', language: "zh-CN", pickDate: true, pickTime: true, hourStep: 1, minuteStep: 1, secondStep: 1, startDate: "2015-01-01 00:00:00", minView: "hour", todayBtn:true, autoclose:true, inputMask: true });
$(".end_datetime") .datetimepicker({ format: 'yyyy-MM-dd hh:mm:ss', language: 'zh-CN', pickDate: true, pickTime: true, hourStep: 1, minuteStep: 1, secondStep: 1, todayBtn:true, autoclose:true, inputMask: true }) .on('changeDate',function(ev){ var endtime=$("input[ name='endtime']").val(); var starttime=$("input[ name='starttime']").val(); alert("结束时间"+endtime); alert(starttime); if(starttime!=""&&endtime!="") { if(starttime>endtime) { alert("终止日期不能晚于起始日期,请重新选择!"); $("#endTime").val(""); } } });