日期時間插件flatpickr.js使用方法

 

今天寫代碼時需要用一款插件來實現對input輸入時間的格式控制，找到了兩款功能合適而且比較美觀的插件：基於Bootstrap的DateTimePicker.js和flatpickr.js插件。一開始先找到DateTimePicker.js插件，本來打算使用的，結果發現使用webpack安裝該插件后，依賴包里的樣式文件是DateTimePicker.less格式，而非是DateTimePicker.css格式，而且該插件很久沒有更新了，於是就放棄了，找到了flatpickr.js插件。

使用該插件方法：

①   引入樣式文件和js文件

<link rel="stylesheet" href="css/flatpickr.css">
<link rel="stylesheet" href="css/bootstrap.css">
<script type="text/javascript" src="js/jquery-2.0.3.js"></script>
<script type="text/javascript" src="js/flatpickr.js"></script>

flatpickr.css和flatpickr.js必須引入，bootstrap.css和jquery-2.0.3.js視使用情況決定是否引入。

②   寫HTML代碼

<input id="myID" value="2017-01-01" class="form-control">

value特性是默認值。

③   js代碼

$("#myID").flatpickr({         //初始化插件

    minDate: "2017-01-01",     //最小日期

    maxDate: "2020-12-31"      //最大日期

});

④   效果

 

⑤   說明

以上js代碼只是簡單地初始化插件，並設置最大日期和最小日期兩個參數。其余更多更復雜的效果可以參考文檔實現，這里只是講解最基本的如何使用該插件。

jQuery插件庫： http://www.jq22.com/jquery-info9859。

文檔： https://chmln.github.io/flatpickr/。

github： https://github.com/chmln/flatpickr。