美觀強(qiáng)大的日期時(shí)間選擇器插件flatpicker

flatpickr功能強(qiáng)大的日期時(shí)間選擇器插件

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>

使用方法：

在頁面中引入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ù)

在配置參數(shù)中，所有的類型為string或boolean的參數(shù)都可以通過data-屬性在HTML標(biāo)簽中進(jìn)行設(shè)置。例如：data-min-date、data-default-date、data-default-date等。

日期格式字符

時(shí)間格式字符

關(guān)于該日期時(shí)間選擇器的本地化和其它一些使用方法，請(qǐng)參考演示頁面中的DEMO。