bootstrap datetimepicker

datetimepicker用法總結

2016年4月21日更新
目錄

datetimepicker用法總結
目錄
簡述
官方文檔
選項屬性
1 format 格式
2 weekStart 一週從哪一天開始
3 startDate 開始時間
4 endDate 結束時間
5 daysOfWeekDisabled 一週的周幾不能選
6 autoclose 選完時間後是否自動關閉
7 startView 選完時間首先顯示的視圖
8 minView 最精確的時間
9 maxView 最高能展現的時間
10 todayBtn 當天日期按鈕
11 todayHighlight 當天日期高亮
12 keyboardNavigation 方向鍵改變日期
13 language 語言
14 forceParse 強制解析
15 minuteStep 步進值
16 pickerPosition 選擇框位置
17 showMeridian 是否顯示上下午
18 initialDate 初始化日期時間

1. 簡述

最近由於項目，在用Bootsrapt寫一些前臺，遇到datetimepicker時，在使用方面出現了一些問題，索性記錄下來，能用到看看，用不到留着本身參考。
2. 官方文檔

附上官方文檔連接，須要的人們傳送門。

官方文檔大部分都是中文，已經不錯了，可是仍是在不少問題上沒有給出例子。博主，把一些經常使用的在後文附上，有錯誤請不吝賜教。
3. 選項（屬性）

整體調用格式爲：
jsp中：

<input type="text" id="demo" >

1

js中：

$("#demo").datetimepicker();

1

3.1 format — 格式

String類型
默認值: ‘mm/dd/yyyy’
這個是最重要最經常使用的屬性之一了。控制顯示格式就是固定值得個性化搭配。
好比，顯示 2016-04-21 19：21

$("#demo").datetimepicker({
format: 'yyyy-mm-dd hh:ii'
});

1
2
3

又好比，你就是喜歡反人類的格式，那你能夠這樣：

$("#demo").datetimepicker({
format: 'hh-yyyy-ii mm:dd'
});

1
2
3

這個是扯淡的，就是個意思，你能夠本身設計樣式，可是裏面的字母都表明不一樣屬性：
符號 意義
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
3.2 weekStart — 一週從哪一天開始

Integer類型
默認值：0
0（星期日）到6（星期六）
例如：

$("#demo").datetimepicker({
weekStart: 3
});

1
2
3

效果：
這裏寫圖片描述
3.3 startDate — 開始時間

Date類型
默認值：開始時間

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

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

例如：

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

1
2
3
4

效果卡件上圖中的灰色部分：
這裏寫圖片描述
3.4 endDate— 結束時間

Date類型
默認值：結束時間

這個時間後面的不能再選擇。
用法同上，再也不贅述。
3.5 daysOfWeekDisabled — 一週的周幾不能選

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

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

例如：

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

1
2
3

或者：

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

1
2
3

效果：
這裏寫圖片描述
3.6 autoclose — 選完時間後是否自動關閉

Boolean類型
默認值：false

當選擇一個日期以後是否當即關閉此日期時間選擇器。
3.7 startView — 選完時間首先顯示的視圖

Number, String類型
默認值：2, ‘month’

日期時間選擇器打開以後首先顯示的視圖。

可接受的值：
值 意義
0 從小時視圖開始，選分
1 從天視圖開始，選小時
2 從月視圖開始，選天
3 從年視圖開始，選月
4 從十年視圖開始，選年
3.8 minView — 最精確的時間

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

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

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

例如：

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

1
2
3

上例中選完往後，不在出現下級時間選擇。
3.9 maxView — 最高能展現的時間

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

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

用法同上，不在贅述。
3.10 todayBtn — 當天日期按鈕

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

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

例如：

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

1
2
3

效果：
這裏寫圖片描述
3.11 todayHighlight — 當天日期高亮

Boolean類型
默認值：false

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

再也不舉例。
3.12 keyboardNavigation — 方向鍵改變日期

Boolean類型
默認值：false

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

再也不舉例。
3.13 language — 語言

String類型
默認值：’en’

中文：’zh-CN’
3.14 forceParse — 強制解析

Boolean類型
默認值：true

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

Number類型
默認值：5

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

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

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

能夠試試看，他拿出位置會發生變化。
3.17 showMeridian — 是否顯示上下午

Boolean類型
默認值：false

在日期和小時選擇界面，出現上下午的選項
3.18 initialDate — 初始化日期時間

Date or String類型
默認值：new Date()

在打開時默認選當時的時間，顯示在View中。

以上。
---------------------
做者：俗人谷
來源：CSDN
原文：https://blog.csdn.net/hizzyzzh/article/details/51212867
版權聲明：本文爲博主原創文章，轉載請附上博文連接！

轉自：https://blog.csdn.net/hizzyzzh/article/details/51212867#31-format-%E6%A0%BC%E5%BC%8F