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时间控件

标签：

原文地址：http://my.oschina.net/u/2405705/blog/512052