flatpickr功能強大的日期時間選擇器插件
日期格式化
<input class=flatpickr data-date-format="d-m-Y"> <input class=flatpickr data-date-format="m/d/Y"> <input class=flatpickr data-date-format="l, F j, Y">
精確到秒鍾
<input class=flatpickr data-enable-time=true data-enable-seconds=true >
使用方法
使用方法：
在頁面中引入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 |