1、datetimepicker
首先，咱們看看點擊選擇時間的時候的展現頁面吧javascript
年 月 日css
時 分 上下午 html
小視圖 java
咱們將這款日期控件下載下來。百度bootstrap日期控件便可。jquery
頁面裏須要的文件有：web
bootstrap.min.css（含有bootstrap 全部css）bootstrap
bootstrap-datetimepicker.min.css（重要，這就是日期控件所需的樣式表）服務器
jquery-1.8.3.min.js（其餘版本的jquery也能夠）app
bootstrap.min.js（含有bootstrap 全部js）ui
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()
您能夠用日期初始化查看器。默認狀況下是如今，因此你能夠指定昨天或今天午夜…
2、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哈哈
頁面效果：