1、使用方法：
1. 在頁面中引入flatpicker.css和flatpicker.js文件。

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

2. HTML代碼：

<input class='flatpickr' data-enable-time='true' data-time_24hr='true' >

代碼中的 data- 屬性是可選的，也能夠選擇寫在 js 初始化參數中，去掉 data- 就能夠。

3. 初始化插件

 

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

$(".calendar").flatpickr({

　　 enable-time: true,
　　 time_24hr: true,
　　 onClose: function(dateObj, dateStr, instance){

　　   }

})

4.  該插件有三個回調函數：

onChange	function(dateObject, dateString, instance)	每第二天期被選擇的時候都觸發該函數。
onOpen	function(dateObject, dateString, instance)	每第二天曆被打開時都會觸發該函數。
onClose	function(dateObject, dateString, instance)	每第二天曆被關閉時都會觸發該函數。

　回調函數有三個參數，第一個是當前中國標準時間，格式爲  Tue Feb 13 2018 00:00:00 GMT+0800 (中國標準時間)，第二個是當前日期 2018-02-13，第三個則返回的是當前 flatpickr 對象：

   

　　就這樣，而後咱們就能夠根據須要編寫相應的操做。

　　這裏舉兩個栗子：

　　1. 開始時間  ——  結束時間  對最大最小時間進行限制，達到聯動的效果

　　html：

<div class="input-group">
     <input type="text" id="datetimeStart" class="form-control" placeholder="起始日期">
     <div class="input-group-addon clear-time-start">
　　　　  <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
　　  </div>
</div>
至
<div class="input-group"">
     <input type="text" id="datetimeEnd" class="form-control" placeholder="結束日期">
     <div class="input-group-addon clear-time-end">
　　      <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
　　  </div>
</div>

　　js：

　　// 初始化 起始時間 和 結束時間
    var time_start =  $("#datetimeStart").flatpickr({
        onClose: function(dateObj, dateStr, instance){
            // doSomething
        }
    });
    var time_end = $("#datetimeEnd").flatpickr({
        onClose: function(dateObj, dateStr, instance){
            // doSomething
        }
    });
    // 時間限制
    time_start.config.onChange = function (dateObj) {
        time_end.set("minDate", dateObj.fp_incr(1));
    };
    time_end.config.onChange = function ( dateObj ) {
        time_start.set("maxDate", dateObj.fp_incr(-1));
    };

　　2.  看上面的代碼有人可能注意到了，這裏有一個清空的操做，我一開始用 flatpickr 的 demo 方法，就沒有生效，而後我就手動清空了 input 的值，結果發現單純清空 input的值並不能觸發 onChange 回調函數，結果 input 是清空了，可是選擇結束時間的時候對它的最小時間仍然有限制，也就是說對 flatpickr 時間選擇器 來講 開始時間依然存在，並無獲得通知說開始時間清空了。

　　而後我嘗試了一些辦法發現 flatpickr 是有本身的清除機制的，就是 clear 方法：

     // 開始日期清空
    $('.clear-time-start').click(function () {
        time_start.clear();
    });

　　這樣會觸發 onChange 回調，可是這個時候回調的參數 dateObj 的參數會變成 null，因此在對時間限制的地方要判斷一下。

　　由於我以前發現這個問題沒找到答案，因此在這裏記錄一下，但願能幫到你，這個方法不算好，但也算是一個思路。

 　   下面附一個 參數表 。

     配置參數表

　　　　在配置參數中，全部的類型爲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