flatpickr日期時間選擇器支持移動手機，提供多種內(nèi)置的主題效果，并且提供對中文的支持。它的特點還有：

• 使用SVG作為界面的圖標(biāo)。

• 兼容jQuery。

• 支持對各種日期格式的解析。

• 輕量級，高性能，壓縮后的版本僅6K大小。

• 對手機原生日期格式的支持。

下圖說明了使用jQuery UI、Bootstrap、packadate.js和flatpickr拉齊制作一個日期時間選擇器時，所需要的文件尺寸大小：

下圖是flatpickr日期時間選擇器的各種主題效果：

配置參數(shù)

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

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

?日期格式字符

字符	描述	示例
d	月份中的天數(shù)，如果不滿2個數(shù)字的會前導(dǎo)0。	01 - 31
D	一個星期中某一天的簡寫文本表示	Mon - Sun
l(小寫的L)	一個星期中某一天的文本表示	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	時間戳	1413704993
y	兩個數(shù)字代表的年	99 or 03
Y	4個數(shù)字代表的年	1999 or 2003

?時間格式字符

字符	描述	示例
H	24小時制	00 to 23
h	12小時制	1 to 12
i	分鐘	00 to 59
S	秒（不滿2位數(shù)補0）	00 to 59
s	秒	0 - 59
K	AM/PM	AM or PM

關(guān)于該日期時間選擇器的本地化和其它一些使用方法，請參考演示頁面中的DEMO。

flatpickr日期時間選擇器插件的github地址為：https://github.com/chmln/flatpickr。

?

?

?

使用方法：

在頁面中引入flatpicker.css和flatpicker.js文件。

<link rel="stylesheet" type="text/css" href="/path/to/flatpickr.css"> <script src="/path/to/flatpickr.js"></script>

HTML示例：

<input id="myID">

初始化插件：

document.getElementsByClassName("myClass").flatpickr({..config}); document.getElementById("myID").flatpickr(); // 兩種js初始化方法 $(".calendar").flatpickr(); // jQuery初始化方法

配置參數(shù)

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

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

日期格式字符

字符	描述	示例
d	月份中的天數(shù)，如果不滿2個數(shù)字的會前導(dǎo)0。	01 - 31
D	一個星期中某一天的簡寫文本表示	Mon - Sun
l(小寫的L)	一個星期中某一天的文本表示	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	時間戳	1413704993
y	兩個數(shù)字代表的年	99 or 03
Y	4個數(shù)字代表的年	1999 or 2003

時間格式字符

字符	描述	示例
H	24小時制	00 to 23
h	12小時制	1 to 12
i	分鐘	00 to 59
S	秒（不滿2位數(shù)補0）	00 to 59
s	秒	0 - 59
K	AM/PM	AM or PM

?

關(guān)于該日期時間選擇器的本地化和其它一些使用方法，請參考演示頁面中的DEMO。

轉(zhuǎn)載于:https://www.cnblogs.com/jiangxiaobo/p/6610203.html

總結(jié)

以上是生活随笔為你收集整理的flatpickr功能强大的日期时间选择器插件的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。