百度盤鏈接: https://pan.baidu.com/s/1c2GRktU 密碼: jf3v (主要需要的都在dist這個(gè)文件夾內(nèi))
1.導(dǎo)入日期選擇器的css樣式（底部有各種顏色對(duì)應(yīng)的樣式）
dist文件夾里的flatpickr.min.css
2.導(dǎo)入js包
dist文件夾里的flatpickr.js或flatpickr.min.js，若需要轉(zhuǎn)為中文耙替，則需要再導(dǎo)入src文件夾里的flatpickr.l10n.zh.js
3.HTML示例
<input id="time">
4.初始化插件
document.getElementById("time").flatpickr(); // js初始化方法
$("#time").flatpickr(); // jQuery初始化方法
5.配置參數(shù)
在配置參數(shù)中亚侠，所有的類型為string或boolean的參數(shù)都可以通過data-屬性在HTML標(biāo)簽中進(jìn)行設(shè)置。例如：data-min-date俗扇、data-default-date硝烂、data-default-date等铜幽。
| 參數(shù) | 類型 | 默認(rèn)值 | 描述 |
|---|---|---|---|
| altFormat | string | "F j, Y" | altInput的日期格式。 |
| altInput | Boolean | false | 是否使用某種用戶友好的方式來顯示日期時(shí)間狮杨。 |
| altInputClass | String | "" | 添加到input上的自定義class類。例如bootstrap用戶可能需要添加一個(gè)form-control class橄教。 |
| allowInput | boolean | false | 是否允許用戶直接在輸入框中輸入日期。 |
| clickOpens | boolean | true | 是否在點(diǎn)擊輸入框時(shí)打開日期時(shí)間選擇界面护蝶。如果你想通過手動(dòng).open()方法來打開，該選項(xiàng)設(shè)置為false持灰。 |
| dateFormat | string | "Y-m-d" | 設(shè)置日期顯示格式。 |
| defaultDate | String/Date Object | null | 設(shè)置一個(gè)初始的日期。 |
| disable | array | [] | 被禁用的日期绽族。 |
| enableTime | boolean | false | 是否啟用時(shí)間選擇姨涡。 |
| enableSeconds | boolean | false | 在時(shí)間選擇器中是否可以選擇秒。 |
| noCalendar | boolean | false | 是否隱藏日歷吧慢。 |
| hourIncrement | integer | 1 | 小時(shí)輸入框的步長涛漂。 |
| 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 | 每次日期被選擇的時(shí)候都觸發(fā)該函數(shù)。 |
| onOpen | function(dateObject, dateString) | null | 每次日歷被打開時(shí)都會(huì)觸發(fā)該函數(shù)攻泼。 |
| onClose | function(dateObject, dateString) | null | 每次日歷被關(guān)閉時(shí)都會(huì)觸發(fā)該函數(shù)火架。 |
| parseDate | function | false | 接收一個(gè)日期字符串并返回一個(gè)日期對(duì)象。 |
| shorthandCurrentMonth | boolean | false | 以簡寫方式顯示月份 |
| weekNumbers | boolean | false | 是否在日歷中顯示星期數(shù)忙菠。 |
| time_24hr | boolean | false | 是否以24小時(shí)格式來顯示時(shí)間何鸡。 |
| utc | boolean | false | 如果為true，日期將會(huì)被解析牛欢、格式化和顯示為UTC格式骡男。 |
| prevArrow | string | < | 向前箭頭圖標(biāo)。 |
| nextArrow | string | > | 向后箭頭圖標(biāo)傍睹。 |
日期格式字符
| 字符 | 描述 | 示例 |
|---|---|---|
| d | 月份中的天數(shù)隔盛，如果不滿2個(gè)數(shù)字的會(huì)前導(dǎo)0。 | 01 - 31 |
| D | 一個(gè)星期中某一天的簡寫文本表示 | Mon - Sun |
| l(小寫的L) | 一個(gè)星期中某一天的文本表示 | Sunday - Saturday |
| j | 不帶前導(dǎo)0的月份中的天數(shù) | 1 - 31 |
| J | 帶序號(hào)后綴焰望，不帶前導(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 | 時(shí)間戳 | 1413704993 |
| y | 兩個(gè)數(shù)字代表的年 | 99 or 03 |
| Y | 4個(gè)數(shù)字代表的年 | 1999 or 2003 |
時(shí)間格式字符
| 字符 | 描述 | 示例 |
|---|---|---|
| H | 24小時(shí)制 | 00 to 23 |
| h | 12小時(shí)制 | 1 to 12 |
| i | 分鐘 | 00 to 59 |
| S | 秒（不滿2位數(shù)補(bǔ)0） | 00 to 59 |
| s | 秒 | 0 - 59 |
| K | AM/PM | AM or PM |
下面是不同顏色樣式的日期選擇器
1.flatpickr.min.css
默認(rèn)樣式.jpg
2.flatpickr.material_blue.min.css
藍(lán)色.jpg
3.flatpickr.material_red.min.css
紅色.jpg
4.flatpickr.material_orange.min.css
橙色.jpg
5.flatpickr.material_green.min.css
原諒色.jpg
6.flatpickr.dark.min.css
黑色.jpg
7.flatpickr.confetti.min.css
金色.jpg
8.flatpickr.grapefruit.min.css
西柚色.jpg
9.flatpickr.base16_flat.min.css
銀灰色.jpg
