日期選擇器：datetimepicker用法總結

轉載：http://www.javashuo.com/article/p-kpqliycv-bd.html

目錄

• 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中。