flatpickr功能強大的日期時間選擇器插件

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

• 使用SVG做爲界面的圖標。

• 兼容jQuery。

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

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

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

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

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

配置參數

在配置參數中，全部的類型爲string或boolean的參數均可以經過data-屬性在HTML標籤中進行設置。例如：data-min-date、data-default-date、data-default-date等。

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

 

日期格式字符

 

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

 

時間格式字符

 

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

關於該日期時間選擇器的本地化和其它一些使用方法，請參考演示頁面中的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初始化方法

配置參數

在配置參數中，全部的類型爲string或boolean的參數均可以經過data-屬性在HTML標籤中進行設置。例如：data-min-date、data-default-date、data-default-date等。

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

 

日期格式字符

 

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

 

時間格式字符

 

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

 

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

文章來自：http://www.javashuo.com/article/p-pnaqvtyo-gb.html