flatpickr功能强大的日期时间选择器插件

flatpickr日期时间选择器支持移动手机，提供多种内置的主题效果，并且提供对中文的支持。它的特点还有：

• 使用SVG作为界面的图标。
• 兼容jQuery。
• 支持对各种日期格式的解析。
• 轻量级，高性能，压缩后的版本仅6K大小。
• 对手机原生日期格式的支持。

下图说明了使用jQuery UI、Bootstrap、packadate.js和flatpickr拉齐制作一个日期时间选择器时，所需要的文件尺寸大小：

下图是flatpickr日期时间选择器的各种主题效果：

配置参数

在配置参数中，所有的类型为string或boolean的参数都可以通过data-属性在HTML标签中进行设置。例如：data-min-date、data-default-date、data-default-date等。

日期格式字符

时间格式字符

关于该日期时间选择器的本地化和其它一些使用方法，请参考演示页面中的DEMO。

flatpickr日期时间选择器插件的github地址为：https://github.com/chmln/flatpickr。

使用方法：

在页面中引入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等。

日期格式字符

时间格式字符

关于该日期时间选择器的本地化和其它一些使用方法，请参考演示页面中的DEMO。

文章来自：https://www.cnblogs.com/jiangxiaobo/p/6610203.html

原文地址：https://www.cnblogs.com/webqiand/p/11004910.html