1:引入相应的css和jsjavascript
css: css
<link href="<%=path%>/css/bootstrap.min.css" rel="stylesheet" type="text/css" />html
<link href="<%=path%>/css/bootstrap-datetimepicker.css" rel="stylesheet" type="text/css">java
js文件:jquery
<script src="<%=path%>/js/jquery.min.js" type="text/javascript"></script>bootstrap
<script src="<%=path%>/js/bootstrap.min.js" type="text/javascript"></script>spa
<script src="<%=path%>/js/bootstrap-datetimepicker.min.js"></script>code
<script src="<%=path%>/js/bootstrap-datetimepicker.zh-CN.js"></script>orm
2:html代码:htm
<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()// });