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()//
        });


你可能感兴趣的:(boostrap时间控件)