一、效果图
二、代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap网页标题</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-datetimepicker.min.css" rel="stylesheet">
</head>
<body>
<input id="timePic" style="width: 200px" name="timePic" class="form-control">
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-datetimepicker.min.js"></script>
<script src="js/bootstrap-datetimepicker.zh-CN.js"></script>
<script type="text/javascript">
$(function(){
$("#timePic").datetimepicker({
language: 'zh-CN',
format: "yyyy-mm-dd hh:ii:00",
todayBtn: true,
autoclose: true,
startView:2,
/* 0 or 'hour' for the hour view
1 or 'day' for the day view
2 or 'month' for month view (the default)
3 or 'year' for the 12-month overview
4 or 'decade' for the 10-year overview. Useful for date-of-birth datetimepickers. */
minView: 0,//最低视图 小时视图
maxView: 4, //最高视图 十年视图
showSecond : true,
showHours : true,
minuteStep:1
});
})
</script>
</body>
</html>