- -
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>