前端-bootstrap-datatimdepicker案例

官方文档: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("");
      }
          }
});