bootstrap-datetimepicker時間控件的使用

引入js

<link href="/css/bootstrap.min.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<link type="text/css" rel="stylesheet" href="css/bootstrap-datetimepicker.min.css">
<script src="js/bootstrap-datetimepicker.min.js" type="text/javascript" /></script>
<script src="js/bootstrap-datetimepicker.zh-CN.js" type="text/javascript" /></script>

<div class="form-group row">
	<div class="left col-xs-3 text-right">
		<label for="">*時間:</label>
	</div>
	<div class="right col-xs-6 text-left">
	    <div class="input-group">
		 <input type="text" class="form-control form_datetime" id="time" name="time"  placeholder="">
		 <span class="input-group-addon" id="basic-addon2"><span class="glyphicon glyphicon-time" aria-hidden="true"></span></span>
	    </div>
	</div>
</div>
<script>

$('.form_datetime').datetimepicker({
	/* minView: "month",  *///選擇日期後，不會再跳轉去選擇時分秒 
	language:  'zh-CN',
	dateFormat: 'yyyy-mm-dd',//日期顯示格式
	timeFormat:'HH:mm:ss',//時間顯示格式
	todayBtn:  1,
	autoclose: 1,
	minView:0,  //0表示能夠選擇小時、分鐘   1只能夠選擇小時
	minuteStep:1,//分鐘間隔1分鐘
});

</script>

format

String. 默認值: 'mm/dd/yyyy'

日期格式， p, P, h, hh, i, ii, s, ss, d, dd, m, mm, M, MM, yy, yyyy 的任意組合。

這個是扯淡的，就是個意思，你能夠本身設計樣式，可是裏面的字母都表明不一樣屬性：

符號	意義
p	12小時制且小寫(‘am’ or ‘pm’)
P	12小時制且大寫(‘AM’ or ‘PM’)
s	秒，前面不補0
ss	秒，前面補0
i	分，前面不補0
ii	分，前面補0
h	時，24小時制，前面不補0
hh	時，24小時制，前面補0
H	時，12小時制，前面不補0
HH	時，12小時制，前面補0
d	日，前面不補0
dd	日，前面補0
m	月，數字表示，前面不補0 如：4
mm	月，數字表示，前面補0 如：04
M	月，縮寫表示，前面補0 如：Apr
MM	月，全稱表示，前面補0 如：April
yy	年，後兩位 如：16
yyyy	年，所有 如：2016

 minView — 最精確的時間

Number, String類型 
默認值：0, ‘hour’

日期時間選擇器所可以提供的最精確的時間選擇視圖。

可接受的值：

值	意義
0	從小時視圖開始，選分
1	從天視圖開始，選小時
2	從月視圖開始，選天
3	從年視圖開始，選月
4	從十年視圖開始，選年

startDate — 開始時間

Date類型 
默認值：開始時間

以前的日期都不能選擇，這個時間以後的時間才能選擇。

我們作一個經常使用的Demo，就是隻能選如今以後的時間：

例如：

var date = new Date();
$("#demo").datetimepicker({
        startDate: date 
        });

endDate— 結束時間

Date類型 
默認值：結束時間

這個時間後面的不能再選擇。 
用法同上，再也不贅述。

 

daysOfWeekDisabled — 一週的周幾不能選

String, Array類型 
默認值：」, []

0（星期日）到6（星期六） 
能夠有多個。

例如：

$("#demo").datetimepicker({
        daysOfWeekDisabled: [0,4,6]
        });

 

autoclose — 選完時間後是否自動關閉

Boolean類型 
默認值：false

當選擇一個日期以後是否當即關閉此日期時間選擇器。

minView — 最精確的時間

Number, String類型 
默認值：0, ‘hour’

日期時間選擇器所可以提供的最精確的時間選擇視圖。

可接受的值：

值	意義
0	從小時視圖開始，選分
1	從天視圖開始，選小時
2	從月視圖開始，選天
3	從年視圖開始，選月
4	從十年視圖開始，選年

例如：

$("#demo").datetimepicker({
        minView : 2
        });

 

maxView — 最高能展現的時間

Number, String類型 
默認值：4, ‘decade’

日期時間選擇器最高能展現的選擇範圍視圖。

 

todayBtn — 當天日期按鈕

Boolean, 「linked」類型 
默認值：false’

若是此值爲true 或 「linked」，則在日期時間選擇器組件的底部顯示一個 「Today」 按鈕用以選擇當前日期。若是是true的話，」Today」 按鈕僅僅將視圖轉到當天的日期，若是是」linked」，當天日期將會被選中。

例如：

$("#demo").datetimepicker({
        todayBtn : true
        });

 

initialDate — 初始化日期時間

 

todayHighlight — 當天日期高亮

Boolean類型 
默認值：false

若是爲true, 高亮當前日期。

再也不舉例。

keyboardNavigation — 方向鍵改變日期

Boolean類型 
默認值：false

是否容許經過方向鍵改變日期。

再也不舉例。

language — 語言

String類型 
默認值：’en’

中文：’zh-CN’ (設置中文的時候要引用到中文的js)

forceParse — 強制解析

Boolean類型 
默認值：true

就是你輸入的可能不正規，可是它胡強制儘可能解析成你規定的格式（format）

minuteStep — 步進值

Number類型 
默認值：5

此數值被當作步進值用於構建小時視圖。就是最小的視圖是每5分鐘可選一次。是以分鐘爲單位的。

pickerPosition — 選擇框位置

String類型 
默認值：’bottom-right’

還支持 : ‘bottom-left’，’top-right’，’top-left’

能夠試試看，他拿出位置會發生變化。

showMeridian — 是否顯示上下午

Boolean類型  默認值：false