- -
1.首先你先要下载以下的资源
- bootstrap.min.css
- bootstrap-datetimepicker.css”
- bootstrap-datetimepicker.min.css
- jquery-1.8.3.min.js
- bootstrap.min.js
- bootstrap-datetimepicker.js
- bootstrap-datetimepicker.zh-CN.js
- bootstrap-datetimepicker.min.js
下载地址：http://download.csdn.net/download/tomcat_2014/9279299
2.下载文件引入自己项目
<script type="text/javascript" src="js/jquery-1.8.3.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/bootstrap-datetimepicker.js" charset="UTF-8"></script>
<script type="text/javascript" src="js/bootstrap-datetimepicker.zh-CN.js" charset="UTF-8">
<script src="js/bootstrap-datetimepicker.min.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="css/bootstrap-datetimepicker.min.css" rel="stylesheet" media="screen">
<link href="css/bootstrap-datetimepicker.css" rel="stylesheet" media="screen">
<link rel="stylesheet" href="css/bootstrap-datetimepicker.min.css">
这个文件的路径是相对你的项目路径，需要根据自己文件js、css文件进行引入。
以下我的文档目录
3.测试源码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html >
<head runat="server">
<title></title>
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="css/bootstrap-datetimepicker.min.css" rel="stylesheet" media="screen">
<link href="css/bootstrap-datetimepicker.css" rel="stylesheet" media="screen">
<script type="text/javascript" src="js/jquery-1.8.3.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/bootstrap-datetimepicker.js" charset="UTF-8"></script>
<script type="text/javascript" src="js/bootstrap-datetimepicker.zh-CN.js" charset="UTF-8"></script>
</head>
<body>
<span class="glyphicon glyphicon-search">123123</span>
<div class="container">
<form action="" class="form-horizontal" role="form">
<fieldset>
<legend>Test</legend>
<div class="form-group">
<label for="dtp_input1" class="col-md-2 control-label">DateTime Picking</label>
<div class="input-group " >
<input class="form-control" id='input1' size="16" type="text" value="" readonly>
<span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
<span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>
</div>
<input type="hidden" id="dtp_input1" value="" /><br/>
</div>
<div class="form-group">
<label for="dtp_input2" class="col-md-2 control-label">Date Picking</label>
<div class="input-group date form_date col-md-5" data-date="" data-date-format="dd MM yyyy" data-link-field="dtp_input2" data-link-format="yyyy-mm-dd">
<input class="form-control" size="16" type="text" value="" readonly>
<span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
</div>
<input type="hidden" id="dtp_input2" value="" /><br/>
</div>
<div class="form-group">
<label for="dtp_input3" class="col-md-2 control-label">Time Picking</label>
<div class="input-group date form_time col-md-5" data-date="" data-date-format="hh:ii" data-link-field="dtp_input3" data-link-format="hh:ii">
<input class="form-control" size="16" type="text" value="" readonly>
<span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
<span class="input-group-addon"><span class="glyphicon glyphicon-time"></span></span>
</div>
<input type="hidden" id="dtp_input3" value="" /><br/>
</div>
</fieldset>
</form>
</div>
<script type="text/javascript">
$('#input1').datetimepicker({
language: 'zh',
weekStart: ,
todayBtn: ,
autoclose: ,
todayHighlight: ,
startView: ,
forceParse: ,
showMeridian:
});
$('.form_date').datetimepicker({
language: 'zh',
weekStart: ,
todayBtn: ,
autoclose: ,
todayHighlight: ,
startView: ,
minView: ,
forceParse:
});
$('.form_time').datetimepicker({
language: 'zh',
weekStart: ,
todayBtn: ,
autoclose: ,
todayHighlight: ,
startView: ,
minView: ,
maxView: ,
forceParse:
});
</script>
</body>
</html>
![用swift开发仪表盘控件（二）[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)