一、datetimepicker
首先，我們看看點擊選擇時間的時候的展示頁面吧
年 月 日
時 分 上下午
小視圖
我們將這款日期控件下載下來。百度bootstrap日期控件即可。
頁面里需要的文件有：
bootstrap.min.css（含有bootstrap 所有css）
bootstrap-datetimepicker.min.css（重要，這就是日期控件所需的樣式表）
jquery-1.8.3.min.js（其他版本的jquery也可以）
bootstrap.min.js（含有bootstrap 所有js）
bootstrap-datetimepicker.js（重要，這就是日期控件所需的js）
locales/bootstrap-datetimepicker.zh-CN.js（重要，這里是日期控件初始值）
html頁面是這樣滴~
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>標題</title>
<meta name="description" content="" />
<meta name="author" content="" />
<link href="bootstrap.min.css" rel="stylesheet" />/*（含有bootstrap 所有css）*/
<link href="bootstrap-datetimepicker.min.css" rel="stylesheet" />/*（重要，這就是日期控件所需的樣式表）*/
</head>
<body>
<div>這里就寫上自己需要的代碼，比如你想要的是一個簡單的輸入框時間控件就寫輸入框的代碼，具體如下幾種樣式介紹</div>
<script type="text/javascript" src="jquery.js"></script>/*（重要，依賴jquery）*/
<script type="text/javascript" src="bootstrap.min.js"></script>/*（含有bootstrap 所有js)*/
<script type="text/javascript" src="bootstrap-datetimepicker.js"></script>/*（重要，這就是日期控件所需的js）*/
<script type="text/javascript" src="locales/bootstrap-datetimepicker.zh-CN.js"></script>/*（重要，彈出日歷里面 顯示的文字
bootstrap里面顯示的是英文 ，觸發后顯示的年月日等的顯示文字，即為：Jan，feb等等）*/
<script type="text/javascript">這里寫自己的js，調用時間選擇器，也就是激活日期選擇器，即為下文的js</script>
</body>
文件引用完了，咱們就開始設置日期控件了。
這里根據不同需求，也有不同的樣式寫法
第一種是最簡單的輸入框
代碼：
<input type="text" value="2014-09-23 23:05" id="datetimepicker">
js：
$('#datetimepicker').datetimepicker({
language: 'zh-CN',//顯示中文
format: 'yyyy-mm-dd',//顯示格式
minView: "month",//設置只顯示到月份
initialDate: new Date(),
autoclose: true,//選中自動關閉
todayBtn: true,//顯示今日按鈕*/
locale: moment.locale('zh-cn')
});
也有這么寫的
代碼：
<input type="text" value="2012-05-15 21:05" id="datetimepicker" data-date-format="yyyy-mm-dd hh:ii">
js：
$('#datetimepicker').datetimepicker();
作為組件使用的時候
代碼是這樣的
<div class="input-append date" id="datetimepicker" data-date="12-02-2012" data-date-format="dd-mm-yyyy">
<input size="16" type="text" value="12-02-2012" readonly>
<span class="add-on"><i class="icon-th"></i></span>
</div>
js：
$('#datetimepicker').datetimepicker();
作為內聯日期時間選擇器：
代碼是這樣的：
<div id="datetimepicker"></div>
js：
|
1
|
$(
'#datetimepicker'
).datetimepicker();
|
以上的介紹中，js部分是一定要寫在頁面里的，注意要寫在頁面最后面。（js依賴於jquery和bootstrap等文件）
比如我想設置自己想要的時間控件。我希望點擊選擇的時候先顯示月份而不是年份，我想要時間的順序是dd-mm-yyyy，這個時候就需要參數來設置了。下面就來具體看看一些參數設置吧。
format
這個是必須要設置的。
String. 默認值: 'mm/dd/yyyy'
日期格式， p, P, h, hh, i, ii, s, ss, d, dd, m, mm, M, MM, yy, yyyy 的任意組合。
weekStart
Integer. 默認值：0
一周從哪一天開始。0（星期日）到6（星期六）
startDate
Date. 默認值：開始時間
可以選擇的最早日期；所有較早的日期將被禁用。
endDate
Date. 默認值：結束時間
可以選擇的最新日期；所有以后的日期將被禁用。
daysOfWeekDisabled 一周禁用的日期
String, Array. 默認值: '', []
一周中應該停用的幾天。數值為0（星期日）至6（星期六）。多個值應該是逗號分隔的。示例：禁用周末：“0，6”或[0，6]。
autoclose
Boolean. 默認值：false
當選擇一個日期之后是否立即關閉此日期時間選擇器。
startView
Number, String. 默認值：2, 'month'
日期時間選擇器打開之后首先顯示的視圖。 可接受的值：
- 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
Number, String. 默認值：0, 'hour'
日期時間選擇器所能夠提供的最精確的時間選擇視圖。
maxView
Number, String. 默認值：4, 'decade'
日期時間選擇器最高能展示的選擇范圍視圖。
todayBtn
Boolean, "linked". 默認值: false
如果此值為true 或 "linked"，則在日期時間選擇器組件的底部顯示一個 "Today" 按鈕用以選擇當前日期。如果是true的話，"Today" 按鈕僅僅將視圖轉到當天的日期，如果是"linked"，當天日期將會被選中。
todayHighlight
Boolean. 默認值: false
如果為true, 高亮當前日期。
keyboardNavigation
Boolean. 默認值: true
是否允許通過方向鍵改變日期。
language
String. 默認值: 'en'
單的情況下發送到服務器）。目前船上有英語（“EN”）、德語（“DE”）、巴西（'BR'）和西班牙語（'ES’）翻譯，但其他可以添加（見下面的I18N）。如果給出一個未知的語言代碼，將使用英語。
forceParse
Boolean. 默認值: true
當選擇器關閉的時候，是否強制解析輸入框中的值。也就是說，當用戶在輸入框中輸入了不正確的日期，選擇器將會盡量解析輸入的值，並將解析后的正確值按照給定的格式format設置到輸入框中。
minuteStep
Number. 默認值: 5
此數值被當做步進值用於構建小時視圖。對於每個 minuteStep 都會生成一組預設時間（分鍾）用於選擇。
pickerReferer : 不建議使用
String. 默認值: 'default' (other value available : 'input')
The referer element to place the picker for the component implementation. If you want to place the picker just under the input field, just specify input.
pickerPosition
String. 默認值: 'bottom-right' (還支持 : 'bottom-left')
此選項當前只在組件實現中提供支持。通過設置選項可以講選擇器放倒輸入框下方。
viewSelect
Number or String. 默認值: same as minView (supported values are: 'decade', 'year', 'month', 'day', 'hour')
使用此選項，您可以選擇將從中選擇日期的視圖。默認情況下，它是最后一個，但是您可以選擇第一個，所以在每次單擊時，日期將被更新。
showMeridian
Boolean. 默認值: false
此選項將啟用日間視圖和日間視圖的子午線視圖。
initialDate
Date or String. 默認值: new Date()
您可以用日期初始化查看器。默認情況下是現在，所以你可以指定昨天或今天午夜…
二、timepicker
1 <div class="col-md-4" style="display: -webkit-inline-box;padding-left:0px"> 2 <div class="input-group"> 3 <input type="text" id="startTime" name="startTime" 4 readonly="readonly" class="form-control timepicker timepicker-default" placeholder="從"> 5 <span class="input-group-btn"> 6 <button class="btn default" type="button"> 7 <i class="fa fa-clock-o"></i> 8 </button> 9 </span> 10 </div> 11 12 </div> 13 <div class="col-md-4"> 14 <div class="input-group"> 15 <input type="text" id="endTime" name="endTime" 16 readonly="readonly" class="form-control timepicker timepicker-default" placeholder="到"> 17 <span class="input-group-btn"> 18 <button class="btn default" type="button"> 19 <i class="fa fa-clock-o"></i> 20 </button> 21 </span> 22 </div> 23 </div>
1 <link rel="stylesheet" type="text/css" href="/assets/global/plugins/bootstrap-timepicker/css/bootstrap-timepicker.min.css" /> 2 <link rel="stylesheet" type="text/css" href="/assets/global/plugins/bootstrap-datetimepicker/css/datetimepicker.css" /> 3 <script type="text/javascript" src="/assets/global/plugins/bootstrap-timepicker/js/bootstrap-timepicker.min.js"></script> 4 <script type="text/javascript" src="/assets/global/plugins/bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js"></script> 5 <script type="text/javascript" src="/assets/global/plugins/bootstrap-datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>
var nowTime = '<%=DateTime.Now.ToString("HH:mm")%>';
$("#startTime").val(nowTime).timepicker('setTime', nowTime);
官方文檔：DateTime Picker
前提，引用bootstrap哈哈
頁面效果：
