flatpickr好看的日期選擇器插件

百度盤鏈接: https://pan.baidu.com/s/1c2GRktU 密碼: jf3v (主要需要的都在dist這個(gè)文件夾內(nèi))

1.導(dǎo)入日期選擇器的css樣式(底部有各種顏色對應(yīng)的樣式)

dist文件夾里的flatpickr.min.css

2.導(dǎo)入js包

dist文件夾里的flatpickr.js或flatpickr.min.js,若需要轉(zhuǎn)為中文,則需要再導(dǎo)入src文件夾里的flatpickr.l10n.zh.js

3.HTML示例

<input id="time">

4.初始化插件

document.getElementById("time").flatpickr();    // js初始化方法
$("#time").flatpickr();   // jQuery初始化方法

5.配置參數(shù)

在配置參數(shù)中,所有的類型為string或boolean的參數(shù)都可以通過data-屬性在HTML標(biāo)簽中進(jìn)行設(shè)置。例如:data-min-date、data-default-date、data-default-date等。

參數(shù) 類型 默認(rèn)值 描述
altFormat string "F j, Y" altInput的日期格式。
altInput Boolean false 是否使用某種用戶友好的方式來顯示日期時(shí)間。
altInputClass String "" 添加到input上的自定義class類。例如bootstrap用戶可能需要添加一個(gè)form-control class。
allowInput boolean false 是否允許用戶直接在輸入框中輸入日期。
clickOpens boolean true 是否在點(diǎn)擊輸入框時(shí)打開日期時(shí)間選擇界面。如果你想通過手動.open()方法來打開,該選項(xiàng)設(shè)置為false。
dateFormat string "Y-m-d" 設(shè)置日期顯示格式。
defaultDate String/Date Object null 設(shè)置一個(gè)初始的日期。
disable array [] 被禁用的日期。
enableTime boolean false 是否啟用時(shí)間選擇。
enableSeconds boolean false 在時(shí)間選擇器中是否可以選擇秒。
noCalendar boolean false 是否隱藏日歷。
hourIncrement integer 1 小時(shí)輸入框的步長。
minuteIncrement integer 5 分鐘輸入框的步長。
inline boolean false 是否以內(nèi)聯(lián)的方式顯示日歷。
static boolean false 日期選擇器位于包裹容器的位置。
wrap Boolean false 包裹元素。
maxDate String null 用戶可以選擇的最大日期。
minDate String null 用戶可以選擇的最小日期。
onChange function(dateObject, dateString) null 每次日期被選擇的時(shí)候都觸發(fā)該函數(shù)。
onOpen function(dateObject, dateString) null 每次日歷被打開時(shí)都會觸發(fā)該函數(shù)。
onClose function(dateObject, dateString) null 每次日歷被關(guān)閉時(shí)都會觸發(fā)該函數(shù)。
parseDate function false 接收一個(gè)日期字符串并返回一個(gè)日期對象。
shorthandCurrentMonth boolean false 以簡寫方式顯示月份
weekNumbers boolean false 是否在日歷中顯示星期數(shù)。
time_24hr boolean false 是否以24小時(shí)格式來顯示時(shí)間。
utc boolean false 如果為true,日期將會被解析、格式化和顯示為UTC格式。
prevArrow string < 向前箭頭圖標(biāo)。
nextArrow string > 向后箭頭圖標(biāo)。

日期格式字符

字符 描述 示例
d 月份中的天數(shù),如果不滿2個(gè)數(shù)字的會前導(dǎo)0。 01 - 31
D 一個(gè)星期中某一天的簡寫文本表示 Mon - Sun
l(小寫的L) 一個(gè)星期中某一天的文本表示 Sunday - Saturday
j 不帶前導(dǎo)0的月份中的天數(shù) 1 - 31
J 帶序號后綴,不帶前導(dǎo)0的月份中的天數(shù) 1st, 2nd, to 31st
w 使用數(shù)字來代表星期中的某一天 0 (星期天) - 6 (星期六)
F 月份的完整文本表示 January - December
m 使用數(shù)字來表示月份,前導(dǎo)帶0。 01 - 12
n 使用數(shù)字來表示月份,前導(dǎo)不帶0。 1 - 12
M 月份的簡寫文本表示 Jan - Dec
U 時(shí)間戳 1413704993
y 兩個(gè)數(shù)字代表的年 99 or 03
Y 4個(gè)數(shù)字代表的年 1999 or 2003

時(shí)間格式字符

字符 描述 示例
H 24小時(shí)制 00 to 23
h 12小時(shí)制 1 to 12
i 分鐘 00 to 59
S 秒(不滿2位數(shù)補(bǔ)0) 00 to 59
s 0 - 59
K AM/PM AM or PM
下面是不同顏色樣式的日期選擇器

1.flatpickr.min.css


默認(rèn)樣式.jpg

2.flatpickr.material_blue.min.css


藍(lán)色.jpg

3.flatpickr.material_red.min.css
紅色.jpg

4.flatpickr.material_orange.min.css


橙色.jpg

5.flatpickr.material_green.min.css
原諒色.jpg

6.flatpickr.dark.min.css
黑色.jpg

7.flatpickr.confetti.min.css
金色.jpg

8.flatpickr.grapefruit.min.css
西柚色.jpg

9.flatpickr.base16_flat.min.css


銀灰色.jpg
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 173,076評論 25 708
  • 沒有讓人有好感的容顏,沒有讓人一直記得的臉龐,不善言談交際,沒有讓人喜歡的感覺,即使努力去做也不會被看到,不會被人...
    在路上淡然閱讀 340評論 0 0
  • 對于風(fēng)俗和規(guī)矩,不是我所能褒貶的,我一直很糾結(jié)要不要寫出這些文字,或許這些東西早就已經(jīng)存在了多少年,古來有之,只是...
    依依蘭風(fēng)閱讀 1,154評論 7 8
  • 改變你的身體從來都不是簡單的事,除非你是18歲的小伙子,那時(shí)想要肌肉就有肌肉、想要脂肪就有脂肪。對于我們來說有點(diǎn)晚...
    晃悠的老劉忙閱讀 677評論 1 3
  • 晚上跟Masa, Sara和Yuki在蘭桂坊的四川私房菜館聚餐,在水煮魚、辣子蝦、拍黃瓜和口水雞面前大家開始聊起了...
    上校Andrew閱讀 201評論 0 0