美觀強大的日期時間選擇器插件flatpicker

flatpickr功能強大的日期時間選擇器插件

flatpickr日期時間選擇器支持移動手機，提供多種內(nèi)置的主題效果，并且提供對中文的支持。它的特點還有：

• 使用SVG作為界面的圖標。

• 兼容jQuery。

• 支持對各種日期格式的解析。

• 輕量級，高性能，壓縮后的版本僅6K大小。

• 對手機原生日期格式的支持。

下圖說明了使用jQuery UI、Bootstrap、packadate.js和flatpickr拉齊制作一個日期時間選擇器時，所需要的文件尺寸大?。?/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標簽中進行設(shè)置。例如：data-min-date、data-default-date、data-default-date等。

日期格式字符

時間格式字符

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