插件描述：jQuery日期時(shí)間選擇器插件flatpicker，功能強(qiáng)大，有多種主題，多國(guó)語(yǔ)言支持中文。
flatpickr日期時(shí)間選擇器支持移動(dòng)手機(jī)，提供多種內(nèi)置的主題效果，并且提供對(duì)中文的支持。它的特點(diǎn)還有：
使用SVG作為界面的圖標(biāo)。
兼容jQuery。
支持對(duì)各種日期格式的解析。
輕量級(jí)，高性能，壓縮后的版本僅6K大小。
對(duì)手機(jī)原生日期格式的支持。
下圖說明了使用jQuery UI、Bootstrap、packadate.js和flatpickr拉齊制作一個(gè)日期時(shí)間選擇器時(shí)，所需要的文件尺寸大?。?/p>
在頁(yè)面中引入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初始化方法
在配置參數(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 | 是否使用某種用戶友好的方式來(lái)顯示日期時(shí)間。 |
| altInputClass | String | "" | 添加到input上的自定義class類。例如bootstrap用戶可能需要添加一個(gè)form-control class。 |
| allowInput | boolean | false | 是否允許用戶直接在輸入框中輸入日期。 |
| clickOpens | boolean | true | 是否在點(diǎn)擊輸入框時(shí)打開日期時(shí)間選擇界面。如果你想通過手動(dòng).open()方法來(lái)打開，該選項(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í)輸入框的步長(zhǎng)。 |
| minuteIncrement | integer | 5 | 分鐘輸入框的步長(zhǎng)。 |
| 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 | 以簡(jiǎn)寫方式顯示月份 |
| weekNumbers | boolean | false | 是否在日歷中顯示星期數(shù)。 |
| time_24hr | boolean | false | 是否以24小時(shí)格式來(lái)顯示時(shí)間。 |
| utc | boolean | false | 日期將會(huì)被解析、格式化和顯示為UTC格式。 |
| prevArrow | string | < | 向前箭頭圖標(biāo)。 |
| nextArrow | string | > | 向后箭頭圖標(biāo)。 |
| 字符 | 描述 | 示例 |
| d | 月份中的天數(shù)，如果不滿2個(gè)數(shù)字的會(huì)前導(dǎo)0。 | 01 - 31 |
| D | 一個(gè)星期中某一天的簡(jiǎn)寫文本表示 | 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ù)字來(lái)代表星期中的某一天 | 0 (星期天) - 6 (星期六) |
| F | 月份的完整文本表示 | January - December |
| m | 使用數(shù)字來(lái)表示月份，前導(dǎo)帶0。 | 01 - 12 |
| n | 使用數(shù)字來(lái)表示月份，前導(dǎo)不帶0。 | 1 - 12 |
| M | 月份的簡(jiǎn)寫文本表示 | Jan - Dec |
| U | 時(shí)間戳 | 1413704993 |
| y | 兩個(gè)數(shù)字代表的年 | 99 or 03 |
| Y | 4個(gè)數(shù)字代表的年 | 1999 or 2003 |
| 字符 | 描述 | 示例 |
| 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 |
關(guān)于該日期時(shí)間選擇器的本地化和其它一些使用方法，請(qǐng)參考演示頁(yè)面中的DEMO。
程序員人生，我編程，我富裕，記住wfuyu網(wǎng)，php教程，php學(xué)習(xí)，php手冊(cè)，CMS模版制作
聲明：本站大部分內(nèi)容是作者原創(chuàng)，少部分收集于互聯(lián)網(wǎng)供大家一起學(xué)習(xí)，原版權(quán)很多不明，如有侵權(quán)請(qǐng)聯(lián)系本站，謝謝！
粵ICP備14040726號(hào)-1?? 2015-2020 程序員人生 版權(quán)所有
