datetimepicker 日期外掛程式用法

2021-09-01 11:11:59 字數 3713 閱讀 7869

最近因為專案,在用bootsrapt寫一些前台,遇到datetimepicker時,在使用方面出現了一些問題,索性記錄下來,能用到看看,用不到留著自己參考。

附上官方文件鏈結,需要的人們傳送門。

官方文件大部分都是中文,已經不錯了,但是還是在很多問題上沒有給出例子。博主,把一些常用的在後文附上,有錯誤請不吝賜教。

總體呼叫格式為:

jsp中:

type="text" id="demo" >
js中:

$(

"#demo").datetimepicker();

string型別預設值: 『mm/dd/yyyy』這個是最重要最常用的屬性之一了。控制顯示格式就是固定值得個性化搭配。

比如,顯示 2016-04-21 19:21

$("#demo").datetimepicker();
$("#demo").datetimepicker();
這個是扯淡的,就是個意思,你可以自己設計樣式,但是裡面的字母都代表不同屬性:

符號意義

p12小時制且小寫(『am』 or 『pm』)

p12小時制且大寫(『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

integer型別

預設值:0

0(星期日)到6(星期六)

例如:

$("#demo").datetimepicker();
date型別預設值:開始時間之前的日期都不能選擇,這個時間之後的時間才能選擇。

例如:

var

date

=new

date();

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

效果卡件上圖中的灰色部分:

date型別

預設值:結束時間

這個時間後面的不能再選擇。

用法同上,不再贅述。

string, array型別

預設值:」,

0(星期日)到6(星期六)

可以有多個。

例如:

$("#demo").datetimepicker();
或者:

$("#demo").datetimepicker();
boolean型別預設值:false當選擇乙個日期之後是否立即關閉此日期時間選擇器。

number, string型別

預設值:2, 『month』

日期時間選擇器開啟之後首先顯示的檢視。

可接受的值:值意義

0從小時檢視開始,選分

1從天檢視開始,選小時

2從月檢視開始,選天

3從年檢視開始,選月

4從十年檢視開始,選年

number, string型別

預設值:0, 『hour』

日期時間選擇器所能夠提供的最精確的時間選擇檢視。

可接受的值:值意義

0從小時檢視開始,選分

1從天檢視開始,選小時

2從月檢視開始,選天

3從年檢視開始,選月

4從十年檢視開始,選年

例如:

$("#demo").datetimepicker();
上例中選完日後,不在出現下級時間選擇。

number, string型別

預設值:4, 『decade』

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

用法同上,不在贅述。

boolean, 「linked」型別

預設值:false』

如果此值為true 或 「linked」,則在日期時間選擇器元件的底部顯示乙個 「today」 按鈕用以選擇當前日期。如果是true的話,」today」 按鈕僅僅將檢視轉到當天的日期,如果是」linked」,當天日期將會被選中。

例如:

$("#demo").datetimepicker();
boolean型別預設值:false如果為true, 高亮當前日期。

不再舉例。

boolean型別

預設值:false

是否允許通過方向鍵改變日期。

不再舉例。

string型別

預設值:』en』

中文:』zh-cn』

boolean型別

預設值:true

就是你輸入的可能不正規,但是它胡強制盡量解析成你規定的格式(format)

number型別

預設值:5

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

string型別

預設值:』bottom-right』

還支援 : 『bottom-left』,』top-right』,』top-left』

可以試試看,他拿出位置會發生變化。

boolean型別

預設值:false

在日期和小時選擇介面,出現上下午的選項

date or string型別

預設值:new date()

在開啟時預設選當時的時間,顯示在view中。

以上。

Date Time Picker控制項使用

1.供使用者選擇日期和時間 將控制項format屬性設定為time,為其新增乙個cdatetimectrl型別變數,然後通過如下 設定日期和時間的顯示格式。timepicker.setformat t yyyy mm dd hh mm ss 2013 02 25 16 32 20 hh表示24小時制...

datetimepicker時間控制項

庫檔案 密碼 c9m5 官網 簡單例項兩個,和這裡有關係,是動態拿取本地時間的呢。看這裡 time時間外掛程式 datetimepicker datetimepicker val begintime dateend datetimepicker val endtime 補充 只顯示到時分秒 效果圖 ...

datetimepicker用法總結

最近因為專案,在用bootsrapt寫一些前台,遇到datetimepicker時,在使用方面出現了一些問題,索性記錄下來,能用到看看,用不到留著自己參考。附上官方文件鏈結,需要的人們傳送門。官方文件大部分都是中文,已經不錯了,但是還是在很多問題上沒有給出例子。博主,把一些常用的在後文附上,有錯誤請...