boostrap時間控件

1：引入相應的css和js

      css: 

<link href="<%=path%>/css/bootstrap.min.css" rel="stylesheet" type="text/css" />

<link href="<%=path%>/css/bootstrap-datetimepicker.css" rel="stylesheet" type="text/css">

    js文件：

         <script src="<%=path%>/js/jquery.min.js" type="text/javascript"></script>

        <script src="<%=path%>/js/bootstrap.min.js" type="text/javascript"></script>

<script src="<%=path%>/js/bootstrap-datetimepicker.min.js"></script>

<script src="<%=path%>/js/bootstrap-datetimepicker.zh-CN.js"></script>

2:html代碼：

        

<div class="form-group">
<label class="col-lg-2 control-label">執行時間:</label>
<div class="col-lg-4">
<input class="form-control" type="text"  data-date-format="yyyy-mm-dd hh:ii:ss" placeholder="執行時間(開始)" id="startTimeDatePicker" name="startTime" />
</div>
<div class="col-lg-4">
<input class="form-control" type="text" data-date-format="yyyy-mm-dd hh:ii:ss" placeholder="執行時間(結束)" name="endTime" />
</div>
</div>

3：js代碼

  

var datepickers = $("input[data-date-format]");
datepickers.datetimepicker({
        language: 'zh-CN',
        weekStart:1,
        autoclose:true,//設置選擇完時間以後自動關閉選擇框
        startDate:new Date()//
        });