时间控件datetimepicker的用法:
1.准备以下所需文件.
bootstrap-datetimepicker.min.css
jquery.min.js
bootstrap-datetimepicker.min.js
2.jsp页面代码
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css/bootstrap-combined.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" media="screen" href="css/bootstrap-datetimepicker.min.css">
</head>
<body>
<div id="datetimepicker" class="input-append date">
<input type="text" name="time" id="time"></input>
<span class="add-on">
<i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
</span>
</div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/bootstrap-datetimepicker.min.js" charset="utf-8"></script>
<script type="text/javascript">
$('#datetimepicker').datetimepicker({
/*format: 'MM/dd/yyyy hh:mm',时间和日期*/
/*format: 'yyyy-MM-dd hh:mm:ss',
language: 'en',
pickDate: true,
pickTime: true,
hourStep: 1,
minuteStep: 15,
secondStep: 30,
inputMask: true*/
/*显示日期和时间,带上午和下午*/
/*format: 'yyyy-MM-dd HH:mm:ss PP',
language: 'en',
pickDate: true,
pickTime: true,
hourStep: 1,
minuteStep: 15,
secondStep: 30,
inputMask: true,
pick12HourFormat: true*/
/*只显示时间*/
/*format: 'hh:mm:ss',
language: 'en',
pickDate: false,
pickTime: true*/
/*只显示日期*/
/*format: 'yyyy-MM-dd',
language: 'en',
pickDate: true,
pickTime: false*/
/*中文格式*/
format: 'yyyy-MM-dd hh:mm:ss',
language: 'ch',
pickDate: true,
pickTime: true,
hourStep: 1,
minuteStep: 15,
secondStep: 30,
inputMask: true
});
</script>
</body>
<html>
3.显示效果图,这里我只显示带时间日期的。
参考实例地址及下载地址:
http://download.csdn.net/detail/xiaofenglu/6876861